diff --git a/.history/src/views/XQXY_20231201160801.vue b/.history/src/views/XQXY_20231201160801.vue
new file mode 100644
index 0000000..4ab7ead
--- /dev/null
+++ b/.history/src/views/XQXY_20231201160801.vue
@@ -0,0 +1,1980 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>山东需求响应工作开展情况</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="ndqyyh">
+                    <p class="title">省综代理用户情况</p>
+                    <div class="bg_title">
+                        <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>工业户数</p>
+                                <p class="tb_percent">324<span style="color: #fff;">户</span></p>
+                            </div>
+                            <div>
+                                <p>楼宇户数</p>
+                                <p class="tb_percent">452<span style="color: #fff;">户</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="qyyh"></div>
+                </div>
+                <div class="ndsdl">
+                    <p class="title">年度售电量</p>
+                    <div class="bg_title">
+                        <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>削锋量</p>
+                                <p class="tb_percent">78.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                            <div>
+                                <p>填谷量</p>
+                                <p class="tb_percent">30.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ndsdl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ndsdje">
+                    <p class="title">年度售电金额</p>
+                    <div id="ndsdje">
+                        <div class="infos" v-for="(item, index) in lists" :key="index">
+                            <div class="first">
+                                <p>
+                                    <img src="../assets/zhsdy/组 3189.png" alt="">
+                                    <span class="titles">{{ item.title }}</span>
+                                </p>
+                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
+                            </div>
+                            <div class="second">
+                                <div class="s_tit">
+                                    <div>
+                                        <p>同比</p>
+                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
+                                                alt=""></p>
+                                    </div>
+                                    <div>
+                                        <p>环比</p>
+                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
+                                                alt="">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="bigBox">
+                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pcfx">
+                    <p class="title">偏差分析</p>
+                    <div id="pcfx">
+                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+                            <div class="pc_l">
+                                <img src="../assets/zhsdy/组 3192.png" alt="">
+                                <span class="pc_name">{{ item.name }}</span>
+                                <span class="pc_count">{{ item.count }}</span>
+                                <span class="pc_danwei">{{ item.danwei }}</span>
+                            </div>
+                            <div class="pc_r">
+                                <p>环比</p>
+                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                        <div id="pcfxb"></div>
+                    </div>
+                </div>
+                <div class="yhhyzb">
+                    <p class="title">用户行业占比</p>
+                    <div id="yhhyzb"></div>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer">
+                <div class="ndqylfb">
+                    <p class="title">用户资源分布情况</p>
+                    <div id="ndqylfb"></div>
+                </div>
+                <div class="ggzcxx">
+                    <p class="title">山东需求侧响应动态热点</p>
+                    <div id="ggzcxx">
+                        <ul>
+                            <li v-for="(item, index) in infos">
+                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
+                                <span class="times">{{ item.time }}</span>
+                                <span class="info">{{ item.info }}</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "电",
+            option1: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+                    barWidth: '30%',
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                            }], false),
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 4,
+                            barBorderRadius: [50, 50, 50, 50]
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            lineHeight: 10,
+                            formatter: '{c}',
+                            position: 'top',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+
+                        }
+                    }
+                }]
+            },
+            option2: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [
+                    {
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ]
+            },
+            option3: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    type: "value",
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        },
+                        formatter: "",
+                    },
+                    // splitLine: {
+                    //     lineStyle: {
+                    //         color: 'rgba(255,255,255,0.12)'
+                    //     }
+                    // }
+                }],
+                yAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                series: [
+                    {
+                        name: "工业",
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        name: "楼宇",
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ],
+                legend: {
+                    left: "right",
+                    data: [
+                        {
+                            icon: "pin",
+                            name: "工业",
+                        },
+                        {
+                            icon: "pin",
+                            name: "楼宇",
+                        }
+                    ],
+                    textStyle: {
+                        fontSize: 14,
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                }
+            },
+            infos: [
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+            ],
+            lists: [
+                {
+                    title: "年度销售指标完成率",
+                    money: "7,965",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "80",
+                },
+                {
+                    title: "年度收益金额",
+                    money: "5,665",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "40",
+                }
+            ],
+            pclist: [
+                {
+                    name: "月度偏差电量",
+                    count: "5514",
+                    danwei: "MWh",
+                    hb: "27.16"
+                },
+                {
+                    name: "月度偏差率",
+                    count: "25",
+                    danwei: "%",
+                    hb: "27.16"
+                },
+            ]
+        };
+    },
+    methods: {
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+        // 年度售电量
+        ndsdl() {
+            // 假数据
+            let left1 = {
+                code: 200,
+                msg: "人数趋势图获取成功",
+                data: {
+                    count: [
+                        153456,
+                        143456,
+                        163456,
+                        183456,
+                        163456,
+                        153456,
+                        163456,
+                        133456,
+                        163456,
+                        143456,
+                        103456,
+                        113456,
+                        153456,
+                        133456,
+                        143456
+                    ],
+                    time: [
+                        "01",
+                        "02",
+                        "03",
+                        "04",
+                        "05",
+                        "06",
+                        "07",
+                        "08",
+                        "09",
+                        "10",
+                        "11",
+                        "12"
+                    ]
+                }
+            };
+            //计算最大值
+            function maxNumCount(num) {
+                let maxNum = "";
+                //将数字转化为数组
+                let max = num.toString().split("");
+                for (var i = 0; i < max.length; i++) {
+                    if (i > 1) {
+                        maxNum += "0";
+                    }
+                }
+                //组装补0
+                if (maxNum.length > 1) {
+                    if (max[1] == "9") {
+                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+                    } else {
+                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+                    }
+                } else {
+                    maxNum = "100";
+                }
+                return maxNum;
+            }
+            //计算最小值
+            function minNumCount(num) {
+                if (num < 10000) {
+                    return "0";
+                }
+                let minNum = "";
+                //将数字转化为数组
+                let min = num.toString().split("");
+                for (var i = 0; i < min.length; i++) {
+                    //组装补0
+                    if (i > 1) {
+                        minNum += "0";
+                    }
+                }
+                if (min[1] == "0") {
+                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
+                } else {
+                    minNum = min[0] + parseInt(min[1]) + minNum;
+                }
+
+                return minNum;
+            }
+
+            let maxNum = Math.max(...left1.data.count);
+            let minNum = Math.min(...left1.data.count);
+            maxNum = maxNumCount(maxNum);
+            minNum = minNumCount(minNum);
+            let yName = "人数（万）";
+            if (maxNum > 9999999) {
+                yName = "人数（千万）";
+            }
+            var option;
+
+            option = {
+                grid: {
+                    width: "84%",
+                    height: "75%",
+                    top: "20%", //生成的图片和顶部的间距
+                    left: "5%",
+                    bottom: "0%",
+                    right: "16%",
+                    containLabel: true //为ture才会生效
+                },
+                tooltip: {
+                    trigger: "axis"
+                    //   axisPointer: {
+                    //     type: "shadow",
+                    //   },
+                },
+                xAxis: {
+                    // name: "日期",
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    type: "category",
+                    boundaryGap: false,
+                    data: left1.data.time,
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        margin: 10
+                        // interval: 0, //使x轴上的文字显示完全,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    name: yName,
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    min: minNum,
+                    max: maxNum,
+                    axisLine: {
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        },
+                        show: true
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(37,52,82)"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        interval: 20,
+                        formatter: function (value, index) {
+                            if (yName.indexOf("千万") && maxNum > 10000000) {
+                                value = (value / 10000000).toFixed(2);
+                            } else if (maxNum > 10000 && maxNum < 10000000) {
+                                value = value / 10000;
+                            }
+                            return value;
+                        }
+                    }
+                },
+                splitLine: {
+                    show: false
+                },
+                series: [
+                    {
+                        data: left1.data.count,
+                        type: "line",
+                        showSymbol: true,
+                        itemStyle: {
+                            emphasis: {
+                                color: "rgb(7,162,148)",
+                                borderColor: "rgba(7,162,148,0.6)",
+                                borderWidth: 20
+                            },
+                            normal: {
+                                color: "rgb(62,195,221)",
+                                borderColor: "rgb(6,65,95)",
+                                lineStyle: {
+                                    color: "rgb(101,184,196)"
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#68e3e5"
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(24, 68, 121,0)"
+                                        }
+                                    ],
+                                    false
+                                )
+                            }
+                        }
+                    }
+                ]
+            };
+        },
+        //偏差分析
+        pcfx() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+            }
+            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位MWh",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: -20,
+                max: 30,
+                axisLabel: {
+                    formatter: "{value}" + "%",
+                    textStyle: { fontSize: 12, color: '#fff' }
+                }
+            }]
+
+            // series
+            const series = [
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
+                        }
+                    },
+                },
+                {
+                    z: 2,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced2,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '销售电价', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData2
+                }]
+            let option = { xAxis, yAxis, series, grid }
+            this.defineEcharts("pcfxb", option);
+        },
+        yhhyzb() {
+            var trafficWay = [{
+                name: '钢铁',
+                value: 280
+            }, {
+                name: '水泥',
+                value: 280
+            }, {
+                name: '化工',
+                value: 280
+            }, {
+                name: '制造',
+                value: 280
+            }, {
+                name: '其他',
+                value: 280
+            }];
+            var data = [];
+            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                center: ["36%", '50%'],
+                radius: [105, 109],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                color: color,
+                title: {
+                    text: '28%',
+                    subtext: "钢铁",
+                    top: '48%',
+                    textAlign: "center",
+                    left: "35%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    },
+                    subtextStyle: {
+                        fontFamily: "微软雅黑",
+                        fontSize: 16,
+                        color: '#fff',
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [{
+                        name: '钢铁',
+                        value: 280
+                    }, {
+                        name: '水泥',
+                        value: 280
+                    }, {
+                        name: '化工',
+                        value: 280
+                    }, {
+                        name: '制造',
+                        value: 280
+                    }, {
+                        name: '其他',
+                        value: 280
+                    }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 320,
+                    bottom: 145,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 12,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            this.defineEcharts("yhhyzb", option)
+        },
+    },
+    mounted() {
+        this.defineEcharts("ndqylfb", this.option1);
+        this.defineEcharts("ndsdl", this.option2);
+        this.defineEcharts("qyyh", this.option3);
+        this.pcfx();
+        this.yhhyzb();
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 567px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ndqyyh {
+                // height: 27.22vh;
+                height: 294px;
+                //   width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #qyyh {
+                    width: 100%;
+                    height: 180px;
+                    margin-top: 100px;
+                }
+            }
+
+            .ndsdl {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 182px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #ndsdl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .ndsdje {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ndsdje {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 50px;
+
+                    .infos {
+                        width: 396px;
+                        height: 104px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url(../assets/zhsdy/组\ 3168.png);
+                        background-size: cover;
+                        margin: 0 auto;
+                        margin-bottom: 15px;
+
+                        .first {
+                            width: 180px;
+
+                            p:nth-child(1) {
+                                width: 180px;
+                                height: 44px;
+                                display: flex;
+                                justify-content: space-between;
+
+                                img {
+                                    width: 15px;
+                                    height: 15px;
+                                    border: none;
+                                    display: block;
+                                    margin-top: 10px;
+                                    margin-left: 10px;
+                                }
+
+                                span.titles {
+                                    width: 140px;
+                                    height: 44px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 44px;
+                                    display: block;
+                                }
+                            }
+
+                            p.money {
+                                width: 145px;
+                                height: 44px;
+                                font-size: 40px;
+                                font-weight: 700;
+                                color: #52C2FF;
+                                line-height: 44px;
+
+                                .danwei {
+                                    color: #fff;
+                                    font-size: 14px;
+                                }
+                            }
+                        }
+
+                        .second {
+                            width: 172px;
+                            height: 100%;
+
+                            div.s_tit {
+                                width: 172px;
+                                display: flex;
+                                justify-content: space-around;
+
+                                p:nth-child(1) {
+                                    height: 36px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 36px;
+                                }
+
+                                p.tb_percent {
+                                    height: 30px;
+                                    font-size: 16px;
+                                    font-weight: 700;
+                                    color: #F2B810;
+                                    line-height: 30px;
+                                    display: flex;
+
+                                    img {
+                                        width: 12px;
+                                        height: 12px;
+                                        margin-top: 8px;
+                                    }
+                                }
+                            }
+
+                            .bigBox {
+                                width: 172px;
+                                height: 10px;
+                                background-color: #273546;
+                                border-radius: 67px 67px 67px 67px;
+                                margin-top: 5px;
+
+                                .smallBox {
+                                    width: 100px;
+                                    height: 10px;
+                                    border-radius: 67px 67px 67px 67px;
+                                    background: linear-gradient(to right,
+                                            rgba(38, 206, 253, 1) 20%,
+                                            rgba(42, 254, 255, 1) 100%,
+                                            rgba(38, 206, 253, 1) 20%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pcfx {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #pcfx {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 40px;
+
+                    .pc_tit {
+                        width: 398px;
+                        height: 48px;
+                        margin: 0 auto;
+                        background: url(../assets/zhsdy/组\ 3169.png);
+                        background-size: cover;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 5px;
+
+                        .pc_l {
+                            width: 272px;
+                            height: 48px;
+                            display: flex;
+                            justify-content: flex-start;
+
+                            .pc_name {
+                                margin-left: 18px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            img {
+                                width: 15px;
+                                height: 15px;
+                                margin-top: 18px;
+                                margin-left: 10px;
+                            }
+
+                            .pc_count {
+                                margin-left: 14px;
+                                height: 44px;
+                                font-size: 24px;
+                                font-weight: 700;
+                                color: #0AA7FF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            .pc_danwei {
+                                margin-left: 6px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                            }
+                        }
+
+                        .pc_r {
+                            margin-right: 20px;
+
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 24px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 24px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 8px;
+                                }
+                            }
+                        }
+                    }
+
+                    #pcfxb {
+                        width: 100%;
+                        height: 150px;
+                    }
+                }
+            }
+
+            .yhhyzb {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #yhhyzb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 1445px;
+            height: 325px;
+            bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .ndqylfb {
+                width: 776px;
+                height: 100%;
+                background: url(../assets/zhsdy/用能量-框.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    transform: translateX(-50%);
+                    line-height: 36px;
+                }
+
+                #ndqylfb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .ggzcxx {
+                width: 653px;
+                height: 325px;
+                background: url(../assets/zhsdy/组\ 3120.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                    transform: translateX(-50%);
+                }
+
+                #ggzcxx {
+                    width: 100%;
+                    margin-top: 60px;
+
+                    ul {
+                        width: 100%;
+
+
+                        li {
+                            width: 100%;
+                            height: 40px;
+                            padding: 0px 36px 0px 18px;
+                            box-sizing: border-box;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .img {
+                                width: 12px;
+                                height: 12px;
+                                display: block;
+                            }
+
+                            .times {
+                                width: 145px;
+                                height: 36px;
+                                color: #52C2FF;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .info {
+                                width: 381px;
+                                height: 36px;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+                        }
+
+                        li:nth-child(2n+2) {
+                            background: #0E2C7E;
+                        }
+                    }
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQXY_20231201160803.vue b/.history/src/views/XQXY_20231201160803.vue
new file mode 100644
index 0000000..4ab7ead
--- /dev/null
+++ b/.history/src/views/XQXY_20231201160803.vue
@@ -0,0 +1,1980 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>山东需求响应工作开展情况</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="ndqyyh">
+                    <p class="title">省综代理用户情况</p>
+                    <div class="bg_title">
+                        <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>工业户数</p>
+                                <p class="tb_percent">324<span style="color: #fff;">户</span></p>
+                            </div>
+                            <div>
+                                <p>楼宇户数</p>
+                                <p class="tb_percent">452<span style="color: #fff;">户</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="qyyh"></div>
+                </div>
+                <div class="ndsdl">
+                    <p class="title">年度售电量</p>
+                    <div class="bg_title">
+                        <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>削锋量</p>
+                                <p class="tb_percent">78.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                            <div>
+                                <p>填谷量</p>
+                                <p class="tb_percent">30.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ndsdl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ndsdje">
+                    <p class="title">年度售电金额</p>
+                    <div id="ndsdje">
+                        <div class="infos" v-for="(item, index) in lists" :key="index">
+                            <div class="first">
+                                <p>
+                                    <img src="../assets/zhsdy/组 3189.png" alt="">
+                                    <span class="titles">{{ item.title }}</span>
+                                </p>
+                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
+                            </div>
+                            <div class="second">
+                                <div class="s_tit">
+                                    <div>
+                                        <p>同比</p>
+                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
+                                                alt=""></p>
+                                    </div>
+                                    <div>
+                                        <p>环比</p>
+                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
+                                                alt="">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="bigBox">
+                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pcfx">
+                    <p class="title">偏差分析</p>
+                    <div id="pcfx">
+                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+                            <div class="pc_l">
+                                <img src="../assets/zhsdy/组 3192.png" alt="">
+                                <span class="pc_name">{{ item.name }}</span>
+                                <span class="pc_count">{{ item.count }}</span>
+                                <span class="pc_danwei">{{ item.danwei }}</span>
+                            </div>
+                            <div class="pc_r">
+                                <p>环比</p>
+                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                        <div id="pcfxb"></div>
+                    </div>
+                </div>
+                <div class="yhhyzb">
+                    <p class="title">用户行业占比</p>
+                    <div id="yhhyzb"></div>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer">
+                <div class="ndqylfb">
+                    <p class="title">用户资源分布情况</p>
+                    <div id="ndqylfb"></div>
+                </div>
+                <div class="ggzcxx">
+                    <p class="title">山东需求侧响应动态热点</p>
+                    <div id="ggzcxx">
+                        <ul>
+                            <li v-for="(item, index) in infos">
+                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
+                                <span class="times">{{ item.time }}</span>
+                                <span class="info">{{ item.info }}</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "电",
+            option1: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+                    barWidth: '30%',
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                            }], false),
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 4,
+                            barBorderRadius: [50, 50, 50, 50]
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            lineHeight: 10,
+                            formatter: '{c}',
+                            position: 'top',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+
+                        }
+                    }
+                }]
+            },
+            option2: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [
+                    {
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ]
+            },
+            option3: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    type: "value",
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        },
+                        formatter: "",
+                    },
+                    // splitLine: {
+                    //     lineStyle: {
+                    //         color: 'rgba(255,255,255,0.12)'
+                    //     }
+                    // }
+                }],
+                yAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                series: [
+                    {
+                        name: "工业",
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        name: "楼宇",
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ],
+                legend: {
+                    left: "right",
+                    data: [
+                        {
+                            icon: "pin",
+                            name: "工业",
+                        },
+                        {
+                            icon: "pin",
+                            name: "楼宇",
+                        }
+                    ],
+                    textStyle: {
+                        fontSize: 14,
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                }
+            },
+            infos: [
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+            ],
+            lists: [
+                {
+                    title: "年度销售指标完成率",
+                    money: "7,965",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "80",
+                },
+                {
+                    title: "年度收益金额",
+                    money: "5,665",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "40",
+                }
+            ],
+            pclist: [
+                {
+                    name: "月度偏差电量",
+                    count: "5514",
+                    danwei: "MWh",
+                    hb: "27.16"
+                },
+                {
+                    name: "月度偏差率",
+                    count: "25",
+                    danwei: "%",
+                    hb: "27.16"
+                },
+            ]
+        };
+    },
+    methods: {
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+        // 年度售电量
+        ndsdl() {
+            // 假数据
+            let left1 = {
+                code: 200,
+                msg: "人数趋势图获取成功",
+                data: {
+                    count: [
+                        153456,
+                        143456,
+                        163456,
+                        183456,
+                        163456,
+                        153456,
+                        163456,
+                        133456,
+                        163456,
+                        143456,
+                        103456,
+                        113456,
+                        153456,
+                        133456,
+                        143456
+                    ],
+                    time: [
+                        "01",
+                        "02",
+                        "03",
+                        "04",
+                        "05",
+                        "06",
+                        "07",
+                        "08",
+                        "09",
+                        "10",
+                        "11",
+                        "12"
+                    ]
+                }
+            };
+            //计算最大值
+            function maxNumCount(num) {
+                let maxNum = "";
+                //将数字转化为数组
+                let max = num.toString().split("");
+                for (var i = 0; i < max.length; i++) {
+                    if (i > 1) {
+                        maxNum += "0";
+                    }
+                }
+                //组装补0
+                if (maxNum.length > 1) {
+                    if (max[1] == "9") {
+                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+                    } else {
+                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+                    }
+                } else {
+                    maxNum = "100";
+                }
+                return maxNum;
+            }
+            //计算最小值
+            function minNumCount(num) {
+                if (num < 10000) {
+                    return "0";
+                }
+                let minNum = "";
+                //将数字转化为数组
+                let min = num.toString().split("");
+                for (var i = 0; i < min.length; i++) {
+                    //组装补0
+                    if (i > 1) {
+                        minNum += "0";
+                    }
+                }
+                if (min[1] == "0") {
+                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
+                } else {
+                    minNum = min[0] + parseInt(min[1]) + minNum;
+                }
+
+                return minNum;
+            }
+
+            let maxNum = Math.max(...left1.data.count);
+            let minNum = Math.min(...left1.data.count);
+            maxNum = maxNumCount(maxNum);
+            minNum = minNumCount(minNum);
+            let yName = "人数（万）";
+            if (maxNum > 9999999) {
+                yName = "人数（千万）";
+            }
+            var option;
+
+            option = {
+                grid: {
+                    width: "84%",
+                    height: "75%",
+                    top: "20%", //生成的图片和顶部的间距
+                    left: "5%",
+                    bottom: "0%",
+                    right: "16%",
+                    containLabel: true //为ture才会生效
+                },
+                tooltip: {
+                    trigger: "axis"
+                    //   axisPointer: {
+                    //     type: "shadow",
+                    //   },
+                },
+                xAxis: {
+                    // name: "日期",
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    type: "category",
+                    boundaryGap: false,
+                    data: left1.data.time,
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        margin: 10
+                        // interval: 0, //使x轴上的文字显示完全,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    name: yName,
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    min: minNum,
+                    max: maxNum,
+                    axisLine: {
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        },
+                        show: true
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(37,52,82)"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        interval: 20,
+                        formatter: function (value, index) {
+                            if (yName.indexOf("千万") && maxNum > 10000000) {
+                                value = (value / 10000000).toFixed(2);
+                            } else if (maxNum > 10000 && maxNum < 10000000) {
+                                value = value / 10000;
+                            }
+                            return value;
+                        }
+                    }
+                },
+                splitLine: {
+                    show: false
+                },
+                series: [
+                    {
+                        data: left1.data.count,
+                        type: "line",
+                        showSymbol: true,
+                        itemStyle: {
+                            emphasis: {
+                                color: "rgb(7,162,148)",
+                                borderColor: "rgba(7,162,148,0.6)",
+                                borderWidth: 20
+                            },
+                            normal: {
+                                color: "rgb(62,195,221)",
+                                borderColor: "rgb(6,65,95)",
+                                lineStyle: {
+                                    color: "rgb(101,184,196)"
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#68e3e5"
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(24, 68, 121,0)"
+                                        }
+                                    ],
+                                    false
+                                )
+                            }
+                        }
+                    }
+                ]
+            };
+        },
+        //偏差分析
+        pcfx() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+            }
+            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位MWh",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: -20,
+                max: 30,
+                axisLabel: {
+                    formatter: "{value}" + "%",
+                    textStyle: { fontSize: 12, color: '#fff' }
+                }
+            }]
+
+            // series
+            const series = [
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
+                        }
+                    },
+                },
+                {
+                    z: 2,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced2,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '销售电价', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData2
+                }]
+            let option = { xAxis, yAxis, series, grid }
+            this.defineEcharts("pcfxb", option);
+        },
+        yhhyzb() {
+            var trafficWay = [{
+                name: '钢铁',
+                value: 280
+            }, {
+                name: '水泥',
+                value: 280
+            }, {
+                name: '化工',
+                value: 280
+            }, {
+                name: '制造',
+                value: 280
+            }, {
+                name: '其他',
+                value: 280
+            }];
+            var data = [];
+            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                center: ["36%", '50%'],
+                radius: [105, 109],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                color: color,
+                title: {
+                    text: '28%',
+                    subtext: "钢铁",
+                    top: '48%',
+                    textAlign: "center",
+                    left: "35%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    },
+                    subtextStyle: {
+                        fontFamily: "微软雅黑",
+                        fontSize: 16,
+                        color: '#fff',
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [{
+                        name: '钢铁',
+                        value: 280
+                    }, {
+                        name: '水泥',
+                        value: 280
+                    }, {
+                        name: '化工',
+                        value: 280
+                    }, {
+                        name: '制造',
+                        value: 280
+                    }, {
+                        name: '其他',
+                        value: 280
+                    }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 320,
+                    bottom: 145,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 12,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            this.defineEcharts("yhhyzb", option)
+        },
+    },
+    mounted() {
+        this.defineEcharts("ndqylfb", this.option1);
+        this.defineEcharts("ndsdl", this.option2);
+        this.defineEcharts("qyyh", this.option3);
+        this.pcfx();
+        this.yhhyzb();
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 567px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ndqyyh {
+                // height: 27.22vh;
+                height: 294px;
+                //   width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #qyyh {
+                    width: 100%;
+                    height: 180px;
+                    margin-top: 100px;
+                }
+            }
+
+            .ndsdl {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 182px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #ndsdl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .ndsdje {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ndsdje {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 50px;
+
+                    .infos {
+                        width: 396px;
+                        height: 104px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url(../assets/zhsdy/组\ 3168.png);
+                        background-size: cover;
+                        margin: 0 auto;
+                        margin-bottom: 15px;
+
+                        .first {
+                            width: 180px;
+
+                            p:nth-child(1) {
+                                width: 180px;
+                                height: 44px;
+                                display: flex;
+                                justify-content: space-between;
+
+                                img {
+                                    width: 15px;
+                                    height: 15px;
+                                    border: none;
+                                    display: block;
+                                    margin-top: 10px;
+                                    margin-left: 10px;
+                                }
+
+                                span.titles {
+                                    width: 140px;
+                                    height: 44px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 44px;
+                                    display: block;
+                                }
+                            }
+
+                            p.money {
+                                width: 145px;
+                                height: 44px;
+                                font-size: 40px;
+                                font-weight: 700;
+                                color: #52C2FF;
+                                line-height: 44px;
+
+                                .danwei {
+                                    color: #fff;
+                                    font-size: 14px;
+                                }
+                            }
+                        }
+
+                        .second {
+                            width: 172px;
+                            height: 100%;
+
+                            div.s_tit {
+                                width: 172px;
+                                display: flex;
+                                justify-content: space-around;
+
+                                p:nth-child(1) {
+                                    height: 36px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 36px;
+                                }
+
+                                p.tb_percent {
+                                    height: 30px;
+                                    font-size: 16px;
+                                    font-weight: 700;
+                                    color: #F2B810;
+                                    line-height: 30px;
+                                    display: flex;
+
+                                    img {
+                                        width: 12px;
+                                        height: 12px;
+                                        margin-top: 8px;
+                                    }
+                                }
+                            }
+
+                            .bigBox {
+                                width: 172px;
+                                height: 10px;
+                                background-color: #273546;
+                                border-radius: 67px 67px 67px 67px;
+                                margin-top: 5px;
+
+                                .smallBox {
+                                    width: 100px;
+                                    height: 10px;
+                                    border-radius: 67px 67px 67px 67px;
+                                    background: linear-gradient(to right,
+                                            rgba(38, 206, 253, 1) 20%,
+                                            rgba(42, 254, 255, 1) 100%,
+                                            rgba(38, 206, 253, 1) 20%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pcfx {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #pcfx {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 40px;
+
+                    .pc_tit {
+                        width: 398px;
+                        height: 48px;
+                        margin: 0 auto;
+                        background: url(../assets/zhsdy/组\ 3169.png);
+                        background-size: cover;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 5px;
+
+                        .pc_l {
+                            width: 272px;
+                            height: 48px;
+                            display: flex;
+                            justify-content: flex-start;
+
+                            .pc_name {
+                                margin-left: 18px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            img {
+                                width: 15px;
+                                height: 15px;
+                                margin-top: 18px;
+                                margin-left: 10px;
+                            }
+
+                            .pc_count {
+                                margin-left: 14px;
+                                height: 44px;
+                                font-size: 24px;
+                                font-weight: 700;
+                                color: #0AA7FF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            .pc_danwei {
+                                margin-left: 6px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                            }
+                        }
+
+                        .pc_r {
+                            margin-right: 20px;
+
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 24px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 24px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 8px;
+                                }
+                            }
+                        }
+                    }
+
+                    #pcfxb {
+                        width: 100%;
+                        height: 150px;
+                    }
+                }
+            }
+
+            .yhhyzb {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #yhhyzb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 1445px;
+            height: 325px;
+            bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .ndqylfb {
+                width: 776px;
+                height: 100%;
+                background: url(../assets/zhsdy/用能量-框.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    transform: translateX(-50%);
+                    line-height: 36px;
+                }
+
+                #ndqylfb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .ggzcxx {
+                width: 653px;
+                height: 325px;
+                background: url(../assets/zhsdy/组\ 3120.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                    transform: translateX(-50%);
+                }
+
+                #ggzcxx {
+                    width: 100%;
+                    margin-top: 60px;
+
+                    ul {
+                        width: 100%;
+
+
+                        li {
+                            width: 100%;
+                            height: 40px;
+                            padding: 0px 36px 0px 18px;
+                            box-sizing: border-box;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .img {
+                                width: 12px;
+                                height: 12px;
+                                display: block;
+                            }
+
+                            .times {
+                                width: 145px;
+                                height: 36px;
+                                color: #52C2FF;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .info {
+                                width: 381px;
+                                height: 36px;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+                        }
+
+                        li:nth-child(2n+2) {
+                            background: #0E2C7E;
+                        }
+                    }
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQXY_20231201160827.vue b/.history/src/views/XQXY_20231201160827.vue
new file mode 100644
index 0000000..170c817
--- /dev/null
+++ b/.history/src/views/XQXY_20231201160827.vue
@@ -0,0 +1,1980 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>山东需求响应工作开展情况</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="ndqyyh">
+                    <p class="title">省综代理用户情况</p>
+                    <div class="bg_title">
+                        <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>工业户数</p>
+                                <p class="tb_percent">324<span style="color: #fff;">户</span></p>
+                            </div>
+                            <div>
+                                <p>楼宇户数</p>
+                                <p class="tb_percent">452<span style="color: #fff;">户</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="qyyh"></div>
+                </div>
+                <div class="ndsdl">
+                    <p class="title">年度售电量</p>
+                    <div class="bg_title">
+                        <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>削锋量</p>
+                                <p class="tb_percent">78.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                            <div>
+                                <p>填谷量</p>
+                                <p class="tb_percent">30.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ndsdl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ndsdje">
+                    <p class="title">年度售电金额</p>
+                    <div id="ndsdje">
+                        <div class="infos" v-for="(item, index) in lists" :key="index">
+                            <div class="first">
+                                <p>
+                                    <img src="../assets/zhsdy/组 3189.png" alt="">
+                                    <span class="titles">{{ item.title }}</span>
+                                </p>
+                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
+                            </div>
+                            <div class="second">
+                                <div class="s_tit">
+                                    <div>
+                                        <p>同比</p>
+                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
+                                                alt=""></p>
+                                    </div>
+                                    <div>
+                                        <p>环比</p>
+                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
+                                                alt="">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="bigBox">
+                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pcfx">
+                    <p class="title">偏差分析</p>
+                    <div id="pcfx">
+                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+                            <div class="pc_l">
+                                <img src="../assets/zhsdy/组 3192.png" alt="">
+                                <span class="pc_name">{{ item.name }}</span>
+                                <span class="pc_count">{{ item.count }}</span>
+                                <span class="pc_danwei">{{ item.danwei }}</span>
+                            </div>
+                            <div class="pc_r">
+                                <p>环比</p>
+                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                        <div id="pcfxb"></div>
+                    </div>
+                </div>
+                <div class="yhhyzb">
+                    <p class="title">用户行业占比</p>
+                    <div id="yhhyzb"></div>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer">
+                <div class="ndqylfb">
+                    <p class="title">用户资源分布情况</p>
+                    <div id="ndqylfb"></div>
+                </div>
+                <div class="ggzcxx">
+                    <p class="title">山东需求侧响应动态热点</p>
+                    <div id="ggzcxx">
+                        <ul>
+                            <li v-for="(item, index) in infos">
+                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
+                                <span class="times">{{ item.time }}</span>
+                                <span class="info">{{ item.info }}</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "电",
+            option1: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+                    barWidth: '30%',
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                            }], false),
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 4,
+                            barBorderRadius: [50, 50, 50, 50]
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            lineHeight: 10,
+                            formatter: '{c}',
+                            position: 'top',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+
+                        }
+                    }
+                }]
+            },
+            option2: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [
+                    {
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ]
+            },
+            option3: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    type: "value",
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        },
+                        formatter: "",
+                    },
+                    // splitLine: {
+                    //     lineStyle: {
+                    //         color: 'rgba(255,255,255,0.12)'
+                    //     }
+                    // }
+                }],
+                yAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                series: [
+                    {
+                        name: "工业",
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        name: "楼宇",
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ],
+                legend: {
+                    left: "right",
+                    data: [
+                        {
+                            icon: "roundRect",
+                            name: "工业",
+                        },
+                        {
+                            icon: "pin",
+                            name: "楼宇",
+                        }
+                    ],
+                    textStyle: {
+                        fontSize: 14,
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                }
+            },
+            infos: [
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+            ],
+            lists: [
+                {
+                    title: "年度销售指标完成率",
+                    money: "7,965",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "80",
+                },
+                {
+                    title: "年度收益金额",
+                    money: "5,665",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "40",
+                }
+            ],
+            pclist: [
+                {
+                    name: "月度偏差电量",
+                    count: "5514",
+                    danwei: "MWh",
+                    hb: "27.16"
+                },
+                {
+                    name: "月度偏差率",
+                    count: "25",
+                    danwei: "%",
+                    hb: "27.16"
+                },
+            ]
+        };
+    },
+    methods: {
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+        // 年度售电量
+        ndsdl() {
+            // 假数据
+            let left1 = {
+                code: 200,
+                msg: "人数趋势图获取成功",
+                data: {
+                    count: [
+                        153456,
+                        143456,
+                        163456,
+                        183456,
+                        163456,
+                        153456,
+                        163456,
+                        133456,
+                        163456,
+                        143456,
+                        103456,
+                        113456,
+                        153456,
+                        133456,
+                        143456
+                    ],
+                    time: [
+                        "01",
+                        "02",
+                        "03",
+                        "04",
+                        "05",
+                        "06",
+                        "07",
+                        "08",
+                        "09",
+                        "10",
+                        "11",
+                        "12"
+                    ]
+                }
+            };
+            //计算最大值
+            function maxNumCount(num) {
+                let maxNum = "";
+                //将数字转化为数组
+                let max = num.toString().split("");
+                for (var i = 0; i < max.length; i++) {
+                    if (i > 1) {
+                        maxNum += "0";
+                    }
+                }
+                //组装补0
+                if (maxNum.length > 1) {
+                    if (max[1] == "9") {
+                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+                    } else {
+                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+                    }
+                } else {
+                    maxNum = "100";
+                }
+                return maxNum;
+            }
+            //计算最小值
+            function minNumCount(num) {
+                if (num < 10000) {
+                    return "0";
+                }
+                let minNum = "";
+                //将数字转化为数组
+                let min = num.toString().split("");
+                for (var i = 0; i < min.length; i++) {
+                    //组装补0
+                    if (i > 1) {
+                        minNum += "0";
+                    }
+                }
+                if (min[1] == "0") {
+                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
+                } else {
+                    minNum = min[0] + parseInt(min[1]) + minNum;
+                }
+
+                return minNum;
+            }
+
+            let maxNum = Math.max(...left1.data.count);
+            let minNum = Math.min(...left1.data.count);
+            maxNum = maxNumCount(maxNum);
+            minNum = minNumCount(minNum);
+            let yName = "人数（万）";
+            if (maxNum > 9999999) {
+                yName = "人数（千万）";
+            }
+            var option;
+
+            option = {
+                grid: {
+                    width: "84%",
+                    height: "75%",
+                    top: "20%", //生成的图片和顶部的间距
+                    left: "5%",
+                    bottom: "0%",
+                    right: "16%",
+                    containLabel: true //为ture才会生效
+                },
+                tooltip: {
+                    trigger: "axis"
+                    //   axisPointer: {
+                    //     type: "shadow",
+                    //   },
+                },
+                xAxis: {
+                    // name: "日期",
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    type: "category",
+                    boundaryGap: false,
+                    data: left1.data.time,
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        margin: 10
+                        // interval: 0, //使x轴上的文字显示完全,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    name: yName,
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    min: minNum,
+                    max: maxNum,
+                    axisLine: {
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        },
+                        show: true
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(37,52,82)"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        interval: 20,
+                        formatter: function (value, index) {
+                            if (yName.indexOf("千万") && maxNum > 10000000) {
+                                value = (value / 10000000).toFixed(2);
+                            } else if (maxNum > 10000 && maxNum < 10000000) {
+                                value = value / 10000;
+                            }
+                            return value;
+                        }
+                    }
+                },
+                splitLine: {
+                    show: false
+                },
+                series: [
+                    {
+                        data: left1.data.count,
+                        type: "line",
+                        showSymbol: true,
+                        itemStyle: {
+                            emphasis: {
+                                color: "rgb(7,162,148)",
+                                borderColor: "rgba(7,162,148,0.6)",
+                                borderWidth: 20
+                            },
+                            normal: {
+                                color: "rgb(62,195,221)",
+                                borderColor: "rgb(6,65,95)",
+                                lineStyle: {
+                                    color: "rgb(101,184,196)"
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#68e3e5"
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(24, 68, 121,0)"
+                                        }
+                                    ],
+                                    false
+                                )
+                            }
+                        }
+                    }
+                ]
+            };
+        },
+        //偏差分析
+        pcfx() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+            }
+            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位MWh",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: -20,
+                max: 30,
+                axisLabel: {
+                    formatter: "{value}" + "%",
+                    textStyle: { fontSize: 12, color: '#fff' }
+                }
+            }]
+
+            // series
+            const series = [
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
+                        }
+                    },
+                },
+                {
+                    z: 2,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced2,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '销售电价', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData2
+                }]
+            let option = { xAxis, yAxis, series, grid }
+            this.defineEcharts("pcfxb", option);
+        },
+        yhhyzb() {
+            var trafficWay = [{
+                name: '钢铁',
+                value: 280
+            }, {
+                name: '水泥',
+                value: 280
+            }, {
+                name: '化工',
+                value: 280
+            }, {
+                name: '制造',
+                value: 280
+            }, {
+                name: '其他',
+                value: 280
+            }];
+            var data = [];
+            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                center: ["36%", '50%'],
+                radius: [105, 109],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                color: color,
+                title: {
+                    text: '28%',
+                    subtext: "钢铁",
+                    top: '48%',
+                    textAlign: "center",
+                    left: "35%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    },
+                    subtextStyle: {
+                        fontFamily: "微软雅黑",
+                        fontSize: 16,
+                        color: '#fff',
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [{
+                        name: '钢铁',
+                        value: 280
+                    }, {
+                        name: '水泥',
+                        value: 280
+                    }, {
+                        name: '化工',
+                        value: 280
+                    }, {
+                        name: '制造',
+                        value: 280
+                    }, {
+                        name: '其他',
+                        value: 280
+                    }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 320,
+                    bottom: 145,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 12,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            this.defineEcharts("yhhyzb", option)
+        },
+    },
+    mounted() {
+        this.defineEcharts("ndqylfb", this.option1);
+        this.defineEcharts("ndsdl", this.option2);
+        this.defineEcharts("qyyh", this.option3);
+        this.pcfx();
+        this.yhhyzb();
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 567px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ndqyyh {
+                // height: 27.22vh;
+                height: 294px;
+                //   width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #qyyh {
+                    width: 100%;
+                    height: 180px;
+                    margin-top: 100px;
+                }
+            }
+
+            .ndsdl {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 182px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #ndsdl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .ndsdje {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ndsdje {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 50px;
+
+                    .infos {
+                        width: 396px;
+                        height: 104px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url(../assets/zhsdy/组\ 3168.png);
+                        background-size: cover;
+                        margin: 0 auto;
+                        margin-bottom: 15px;
+
+                        .first {
+                            width: 180px;
+
+                            p:nth-child(1) {
+                                width: 180px;
+                                height: 44px;
+                                display: flex;
+                                justify-content: space-between;
+
+                                img {
+                                    width: 15px;
+                                    height: 15px;
+                                    border: none;
+                                    display: block;
+                                    margin-top: 10px;
+                                    margin-left: 10px;
+                                }
+
+                                span.titles {
+                                    width: 140px;
+                                    height: 44px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 44px;
+                                    display: block;
+                                }
+                            }
+
+                            p.money {
+                                width: 145px;
+                                height: 44px;
+                                font-size: 40px;
+                                font-weight: 700;
+                                color: #52C2FF;
+                                line-height: 44px;
+
+                                .danwei {
+                                    color: #fff;
+                                    font-size: 14px;
+                                }
+                            }
+                        }
+
+                        .second {
+                            width: 172px;
+                            height: 100%;
+
+                            div.s_tit {
+                                width: 172px;
+                                display: flex;
+                                justify-content: space-around;
+
+                                p:nth-child(1) {
+                                    height: 36px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 36px;
+                                }
+
+                                p.tb_percent {
+                                    height: 30px;
+                                    font-size: 16px;
+                                    font-weight: 700;
+                                    color: #F2B810;
+                                    line-height: 30px;
+                                    display: flex;
+
+                                    img {
+                                        width: 12px;
+                                        height: 12px;
+                                        margin-top: 8px;
+                                    }
+                                }
+                            }
+
+                            .bigBox {
+                                width: 172px;
+                                height: 10px;
+                                background-color: #273546;
+                                border-radius: 67px 67px 67px 67px;
+                                margin-top: 5px;
+
+                                .smallBox {
+                                    width: 100px;
+                                    height: 10px;
+                                    border-radius: 67px 67px 67px 67px;
+                                    background: linear-gradient(to right,
+                                            rgba(38, 206, 253, 1) 20%,
+                                            rgba(42, 254, 255, 1) 100%,
+                                            rgba(38, 206, 253, 1) 20%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pcfx {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #pcfx {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 40px;
+
+                    .pc_tit {
+                        width: 398px;
+                        height: 48px;
+                        margin: 0 auto;
+                        background: url(../assets/zhsdy/组\ 3169.png);
+                        background-size: cover;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 5px;
+
+                        .pc_l {
+                            width: 272px;
+                            height: 48px;
+                            display: flex;
+                            justify-content: flex-start;
+
+                            .pc_name {
+                                margin-left: 18px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            img {
+                                width: 15px;
+                                height: 15px;
+                                margin-top: 18px;
+                                margin-left: 10px;
+                            }
+
+                            .pc_count {
+                                margin-left: 14px;
+                                height: 44px;
+                                font-size: 24px;
+                                font-weight: 700;
+                                color: #0AA7FF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            .pc_danwei {
+                                margin-left: 6px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                            }
+                        }
+
+                        .pc_r {
+                            margin-right: 20px;
+
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 24px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 24px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 8px;
+                                }
+                            }
+                        }
+                    }
+
+                    #pcfxb {
+                        width: 100%;
+                        height: 150px;
+                    }
+                }
+            }
+
+            .yhhyzb {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #yhhyzb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 1445px;
+            height: 325px;
+            bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .ndqylfb {
+                width: 776px;
+                height: 100%;
+                background: url(../assets/zhsdy/用能量-框.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    transform: translateX(-50%);
+                    line-height: 36px;
+                }
+
+                #ndqylfb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .ggzcxx {
+                width: 653px;
+                height: 325px;
+                background: url(../assets/zhsdy/组\ 3120.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                    transform: translateX(-50%);
+                }
+
+                #ggzcxx {
+                    width: 100%;
+                    margin-top: 60px;
+
+                    ul {
+                        width: 100%;
+
+
+                        li {
+                            width: 100%;
+                            height: 40px;
+                            padding: 0px 36px 0px 18px;
+                            box-sizing: border-box;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .img {
+                                width: 12px;
+                                height: 12px;
+                                display: block;
+                            }
+
+                            .times {
+                                width: 145px;
+                                height: 36px;
+                                color: #52C2FF;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .info {
+                                width: 381px;
+                                height: 36px;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+                        }
+
+                        li:nth-child(2n+2) {
+                            background: #0E2C7E;
+                        }
+                    }
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQXY_20231201160830.vue b/.history/src/views/XQXY_20231201160830.vue
new file mode 100644
index 0000000..8aa7cc8
--- /dev/null
+++ b/.history/src/views/XQXY_20231201160830.vue
@@ -0,0 +1,1980 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>山东需求响应工作开展情况</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="ndqyyh">
+                    <p class="title">省综代理用户情况</p>
+                    <div class="bg_title">
+                        <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>工业户数</p>
+                                <p class="tb_percent">324<span style="color: #fff;">户</span></p>
+                            </div>
+                            <div>
+                                <p>楼宇户数</p>
+                                <p class="tb_percent">452<span style="color: #fff;">户</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="qyyh"></div>
+                </div>
+                <div class="ndsdl">
+                    <p class="title">年度售电量</p>
+                    <div class="bg_title">
+                        <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>削锋量</p>
+                                <p class="tb_percent">78.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                            <div>
+                                <p>填谷量</p>
+                                <p class="tb_percent">30.2<span style="color: #fff;">万KW</span></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ndsdl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ndsdje">
+                    <p class="title">年度售电金额</p>
+                    <div id="ndsdje">
+                        <div class="infos" v-for="(item, index) in lists" :key="index">
+                            <div class="first">
+                                <p>
+                                    <img src="../assets/zhsdy/组 3189.png" alt="">
+                                    <span class="titles">{{ item.title }}</span>
+                                </p>
+                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
+                            </div>
+                            <div class="second">
+                                <div class="s_tit">
+                                    <div>
+                                        <p>同比</p>
+                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
+                                                alt=""></p>
+                                    </div>
+                                    <div>
+                                        <p>环比</p>
+                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
+                                                alt="">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="bigBox">
+                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pcfx">
+                    <p class="title">偏差分析</p>
+                    <div id="pcfx">
+                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+                            <div class="pc_l">
+                                <img src="../assets/zhsdy/组 3192.png" alt="">
+                                <span class="pc_name">{{ item.name }}</span>
+                                <span class="pc_count">{{ item.count }}</span>
+                                <span class="pc_danwei">{{ item.danwei }}</span>
+                            </div>
+                            <div class="pc_r">
+                                <p>环比</p>
+                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                        <div id="pcfxb"></div>
+                    </div>
+                </div>
+                <div class="yhhyzb">
+                    <p class="title">用户行业占比</p>
+                    <div id="yhhyzb"></div>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer">
+                <div class="ndqylfb">
+                    <p class="title">用户资源分布情况</p>
+                    <div id="ndqylfb"></div>
+                </div>
+                <div class="ggzcxx">
+                    <p class="title">山东需求侧响应动态热点</p>
+                    <div id="ggzcxx">
+                        <ul>
+                            <li v-for="(item, index) in infos">
+                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
+                                <span class="times">{{ item.time }}</span>
+                                <span class="info">{{ item.info }}</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "电",
+            option1: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+                    barWidth: '30%',
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                            }], false),
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 4,
+                            barBorderRadius: [50, 50, 50, 50]
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            lineHeight: 10,
+                            formatter: '{c}',
+                            position: 'top',
+                            textStyle: {
+                                color: '#fff',
+                                fontSize: 12
+                            }
+
+                        }
+                    }
+                }]
+            },
+            option2: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：户",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [
+                    {
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        barGap: 2,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ]
+            },
+            option3: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '13%'
+                },
+                xAxis: [{
+                    type: "value",
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        },
+                        formatter: "",
+                    },
+                    // splitLine: {
+                    //     lineStyle: {
+                    //         color: 'rgba(255,255,255,0.12)'
+                    //     }
+                    // }
+                }],
+                yAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["2019", "2020", "2021"],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                series: [
+                    {
+                        name: "工业",
+                        type: 'bar',
+                        data: [24, 30, 12],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                    {
+                        name: "楼宇",
+                        type: 'bar',
+                        data: [35, 18, 24],
+                        barWidth: 9,
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
+                                }], false),
+                                shadowColor: 'rgba(0,160,221,1)',
+                                shadowBlur: 4,
+                                barBorderRadius: [50, 50, 50, 50]
+                            }
+                        },
+                        label: {
+                            normal: {
+                                show: true,
+                                lineHeight: 10,
+                                formatter: '{c}',
+                                position: 'top',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontSize: 12
+                                }
+
+                            }
+                        }
+                    },
+                ],
+                legend: {
+                    left: "right",
+                    data: [
+                        {
+                            icon: "roundRect",
+                            name: "工业",
+                        },
+                        {
+                            icon: "roundRect",
+                            name: "楼宇",
+                        }
+                    ],
+                    textStyle: {
+                        fontSize: 14,
+                        fontWeight: 400,
+                        color: "rgba(255,255,255,0.8)",
+                    },
+                }
+            },
+            infos: [
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+            ],
+            lists: [
+                {
+                    title: "年度销售指标完成率",
+                    money: "7,965",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "80",
+                },
+                {
+                    title: "年度收益金额",
+                    money: "5,665",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "40",
+                }
+            ],
+            pclist: [
+                {
+                    name: "月度偏差电量",
+                    count: "5514",
+                    danwei: "MWh",
+                    hb: "27.16"
+                },
+                {
+                    name: "月度偏差率",
+                    count: "25",
+                    danwei: "%",
+                    hb: "27.16"
+                },
+            ]
+        };
+    },
+    methods: {
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+        // 年度售电量
+        ndsdl() {
+            // 假数据
+            let left1 = {
+                code: 200,
+                msg: "人数趋势图获取成功",
+                data: {
+                    count: [
+                        153456,
+                        143456,
+                        163456,
+                        183456,
+                        163456,
+                        153456,
+                        163456,
+                        133456,
+                        163456,
+                        143456,
+                        103456,
+                        113456,
+                        153456,
+                        133456,
+                        143456
+                    ],
+                    time: [
+                        "01",
+                        "02",
+                        "03",
+                        "04",
+                        "05",
+                        "06",
+                        "07",
+                        "08",
+                        "09",
+                        "10",
+                        "11",
+                        "12"
+                    ]
+                }
+            };
+            //计算最大值
+            function maxNumCount(num) {
+                let maxNum = "";
+                //将数字转化为数组
+                let max = num.toString().split("");
+                for (var i = 0; i < max.length; i++) {
+                    if (i > 1) {
+                        maxNum += "0";
+                    }
+                }
+                //组装补0
+                if (maxNum.length > 1) {
+                    if (max[1] == "9") {
+                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+                    } else {
+                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+                    }
+                } else {
+                    maxNum = "100";
+                }
+                return maxNum;
+            }
+            //计算最小值
+            function minNumCount(num) {
+                if (num < 10000) {
+                    return "0";
+                }
+                let minNum = "";
+                //将数字转化为数组
+                let min = num.toString().split("");
+                for (var i = 0; i < min.length; i++) {
+                    //组装补0
+                    if (i > 1) {
+                        minNum += "0";
+                    }
+                }
+                if (min[1] == "0") {
+                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
+                } else {
+                    minNum = min[0] + parseInt(min[1]) + minNum;
+                }
+
+                return minNum;
+            }
+
+            let maxNum = Math.max(...left1.data.count);
+            let minNum = Math.min(...left1.data.count);
+            maxNum = maxNumCount(maxNum);
+            minNum = minNumCount(minNum);
+            let yName = "人数（万）";
+            if (maxNum > 9999999) {
+                yName = "人数（千万）";
+            }
+            var option;
+
+            option = {
+                grid: {
+                    width: "84%",
+                    height: "75%",
+                    top: "20%", //生成的图片和顶部的间距
+                    left: "5%",
+                    bottom: "0%",
+                    right: "16%",
+                    containLabel: true //为ture才会生效
+                },
+                tooltip: {
+                    trigger: "axis"
+                    //   axisPointer: {
+                    //     type: "shadow",
+                    //   },
+                },
+                xAxis: {
+                    // name: "日期",
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    type: "category",
+                    boundaryGap: false,
+                    data: left1.data.time,
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        margin: 10
+                        // interval: 0, //使x轴上的文字显示完全,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    name: yName,
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    min: minNum,
+                    max: maxNum,
+                    axisLine: {
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        },
+                        show: true
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(37,52,82)"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        interval: 20,
+                        formatter: function (value, index) {
+                            if (yName.indexOf("千万") && maxNum > 10000000) {
+                                value = (value / 10000000).toFixed(2);
+                            } else if (maxNum > 10000 && maxNum < 10000000) {
+                                value = value / 10000;
+                            }
+                            return value;
+                        }
+                    }
+                },
+                splitLine: {
+                    show: false
+                },
+                series: [
+                    {
+                        data: left1.data.count,
+                        type: "line",
+                        showSymbol: true,
+                        itemStyle: {
+                            emphasis: {
+                                color: "rgb(7,162,148)",
+                                borderColor: "rgba(7,162,148,0.6)",
+                                borderWidth: 20
+                            },
+                            normal: {
+                                color: "rgb(62,195,221)",
+                                borderColor: "rgb(6,65,95)",
+                                lineStyle: {
+                                    color: "rgb(101,184,196)"
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#68e3e5"
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(24, 68, 121,0)"
+                                        }
+                                    ],
+                                    false
+                                )
+                            }
+                        }
+                    }
+                ]
+            };
+        },
+        //偏差分析
+        pcfx() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+            }
+            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位MWh",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: -20,
+                max: 30,
+                axisLabel: {
+                    formatter: "{value}" + "%",
+                    textStyle: { fontSize: 12, color: '#fff' }
+                }
+            }]
+
+            // series
+            const series = [
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
+                        }
+                    },
+                },
+                {
+                    z: 2,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced2,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '销售电价', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData2
+                }]
+            let option = { xAxis, yAxis, series, grid }
+            this.defineEcharts("pcfxb", option);
+        },
+        yhhyzb() {
+            var trafficWay = [{
+                name: '钢铁',
+                value: 280
+            }, {
+                name: '水泥',
+                value: 280
+            }, {
+                name: '化工',
+                value: 280
+            }, {
+                name: '制造',
+                value: 280
+            }, {
+                name: '其他',
+                value: 280
+            }];
+            var data = [];
+            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                center: ["36%", '50%'],
+                radius: [105, 109],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                color: color,
+                title: {
+                    text: '28%',
+                    subtext: "钢铁",
+                    top: '48%',
+                    textAlign: "center",
+                    left: "35%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    },
+                    subtextStyle: {
+                        fontFamily: "微软雅黑",
+                        fontSize: 16,
+                        color: '#fff',
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [{
+                        name: '钢铁',
+                        value: 280
+                    }, {
+                        name: '水泥',
+                        value: 280
+                    }, {
+                        name: '化工',
+                        value: 280
+                    }, {
+                        name: '制造',
+                        value: 280
+                    }, {
+                        name: '其他',
+                        value: 280
+                    }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 320,
+                    bottom: 145,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 12,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            this.defineEcharts("yhhyzb", option)
+        },
+    },
+    mounted() {
+        this.defineEcharts("ndqylfb", this.option1);
+        this.defineEcharts("ndsdl", this.option2);
+        this.defineEcharts("qyyh", this.option3);
+        this.pcfx();
+        this.yhhyzb();
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 567px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ndqyyh {
+                // height: 27.22vh;
+                height: 294px;
+                //   width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #qyyh {
+                    width: 100%;
+                    height: 180px;
+                    margin-top: 100px;
+                }
+            }
+
+            .ndsdl {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            margin-left: 5px;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 182px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #ndsdl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .ndsdje {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ndsdje {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 50px;
+
+                    .infos {
+                        width: 396px;
+                        height: 104px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url(../assets/zhsdy/组\ 3168.png);
+                        background-size: cover;
+                        margin: 0 auto;
+                        margin-bottom: 15px;
+
+                        .first {
+                            width: 180px;
+
+                            p:nth-child(1) {
+                                width: 180px;
+                                height: 44px;
+                                display: flex;
+                                justify-content: space-between;
+
+                                img {
+                                    width: 15px;
+                                    height: 15px;
+                                    border: none;
+                                    display: block;
+                                    margin-top: 10px;
+                                    margin-left: 10px;
+                                }
+
+                                span.titles {
+                                    width: 140px;
+                                    height: 44px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 44px;
+                                    display: block;
+                                }
+                            }
+
+                            p.money {
+                                width: 145px;
+                                height: 44px;
+                                font-size: 40px;
+                                font-weight: 700;
+                                color: #52C2FF;
+                                line-height: 44px;
+
+                                .danwei {
+                                    color: #fff;
+                                    font-size: 14px;
+                                }
+                            }
+                        }
+
+                        .second {
+                            width: 172px;
+                            height: 100%;
+
+                            div.s_tit {
+                                width: 172px;
+                                display: flex;
+                                justify-content: space-around;
+
+                                p:nth-child(1) {
+                                    height: 36px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 36px;
+                                }
+
+                                p.tb_percent {
+                                    height: 30px;
+                                    font-size: 16px;
+                                    font-weight: 700;
+                                    color: #F2B810;
+                                    line-height: 30px;
+                                    display: flex;
+
+                                    img {
+                                        width: 12px;
+                                        height: 12px;
+                                        margin-top: 8px;
+                                    }
+                                }
+                            }
+
+                            .bigBox {
+                                width: 172px;
+                                height: 10px;
+                                background-color: #273546;
+                                border-radius: 67px 67px 67px 67px;
+                                margin-top: 5px;
+
+                                .smallBox {
+                                    width: 100px;
+                                    height: 10px;
+                                    border-radius: 67px 67px 67px 67px;
+                                    background: linear-gradient(to right,
+                                            rgba(38, 206, 253, 1) 20%,
+                                            rgba(42, 254, 255, 1) 100%,
+                                            rgba(38, 206, 253, 1) 20%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pcfx {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #pcfx {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 40px;
+
+                    .pc_tit {
+                        width: 398px;
+                        height: 48px;
+                        margin: 0 auto;
+                        background: url(../assets/zhsdy/组\ 3169.png);
+                        background-size: cover;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 5px;
+
+                        .pc_l {
+                            width: 272px;
+                            height: 48px;
+                            display: flex;
+                            justify-content: flex-start;
+
+                            .pc_name {
+                                margin-left: 18px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            img {
+                                width: 15px;
+                                height: 15px;
+                                margin-top: 18px;
+                                margin-left: 10px;
+                            }
+
+                            .pc_count {
+                                margin-left: 14px;
+                                height: 44px;
+                                font-size: 24px;
+                                font-weight: 700;
+                                color: #0AA7FF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            .pc_danwei {
+                                margin-left: 6px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                            }
+                        }
+
+                        .pc_r {
+                            margin-right: 20px;
+
+                            p:nth-child(1) {
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                height: 24px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 24px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 8px;
+                                }
+                            }
+                        }
+                    }
+
+                    #pcfxb {
+                        width: 100%;
+                        height: 150px;
+                    }
+                }
+            }
+
+            .yhhyzb {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #yhhyzb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 1445px;
+            height: 325px;
+            bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .ndqylfb {
+                width: 776px;
+                height: 100%;
+                background: url(../assets/zhsdy/用能量-框.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    transform: translateX(-50%);
+                    line-height: 36px;
+                }
+
+                #ndqylfb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .ggzcxx {
+                width: 653px;
+                height: 325px;
+                background: url(../assets/zhsdy/组\ 3120.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                    transform: translateX(-50%);
+                }
+
+                #ggzcxx {
+                    width: 100%;
+                    margin-top: 60px;
+
+                    ul {
+                        width: 100%;
+
+
+                        li {
+                            width: 100%;
+                            height: 40px;
+                            padding: 0px 36px 0px 18px;
+                            box-sizing: border-box;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .img {
+                                width: 12px;
+                                height: 12px;
+                                display: block;
+                            }
+
+                            .times {
+                                width: 145px;
+                                height: 36px;
+                                color: #52C2FF;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .info {
+                                width: 381px;
+                                height: 36px;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+                        }
+
+                        li:nth-child(2n+2) {
+                            background: #0E2C7E;
+                        }
+                    }
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/XQXY_20231201161125.vue b/.history/src/views/XQXY_20231201161125.vue
new file mode 100644
index 0000000..8331066
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161125.vue
@@ -0,0 +1,2151 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "年度销售指标完成率",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    // 年度售电量
+    ndsdl() {
+      // 假数据
+      let left1 = {
+        code: 200,
+        msg: "人数趋势图获取成功",
+        data: {
+          count: [
+            153456, 143456, 163456, 183456, 163456, 153456, 163456, 133456,
+            163456, 143456, 103456, 113456, 153456, 133456, 143456,
+          ],
+          time: [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+          ],
+        },
+      };
+      //计算最大值
+      function maxNumCount(num) {
+        let maxNum = "";
+        //将数字转化为数组
+        let max = num.toString().split("");
+        for (var i = 0; i < max.length; i++) {
+          if (i > 1) {
+            maxNum += "0";
+          }
+        }
+        //组装补0
+        if (maxNum.length > 1) {
+          if (max[1] == "9") {
+            maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+          } else {
+            maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+          }
+        } else {
+          maxNum = "100";
+        }
+        return maxNum;
+      }
+      //计算最小值
+      function minNumCount(num) {
+        if (num < 10000) {
+          return "0";
+        }
+        let minNum = "";
+        //将数字转化为数组
+        let min = num.toString().split("");
+        for (var i = 0; i < min.length; i++) {
+          //组装补0
+          if (i > 1) {
+            minNum += "0";
+          }
+        }
+        if (min[1] == "0") {
+          minNum = parseInt(min[0]) - 1 + "9" + minNum;
+        } else {
+          minNum = min[0] + parseInt(min[1]) + minNum;
+        }
+
+        return minNum;
+      }
+
+      let maxNum = Math.max(...left1.data.count);
+      let minNum = Math.min(...left1.data.count);
+      maxNum = maxNumCount(maxNum);
+      minNum = minNumCount(minNum);
+      let yName = "人数（万）";
+      if (maxNum > 9999999) {
+        yName = "人数（千万）";
+      }
+      var option;
+
+      option = {
+        grid: {
+          width: "84%",
+          height: "75%",
+          top: "20%", //生成的图片和顶部的间距
+          left: "5%",
+          bottom: "0%",
+          right: "16%",
+          containLabel: true, //为ture才会生效
+        },
+        tooltip: {
+          trigger: "axis",
+          //   axisPointer: {
+          //     type: "shadow",
+          //   },
+        },
+        xAxis: {
+          // name: "日期",
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          type: "category",
+          boundaryGap: false,
+          data: left1.data.time,
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            margin: 10,
+            // interval: 0, //使x轴上的文字显示完全,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: yName,
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          min: minNum,
+          max: maxNum,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(37,52,82)",
+            },
+          },
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            interval: 20,
+            formatter: function (value, index) {
+              if (yName.indexOf("千万") && maxNum > 10000000) {
+                value = (value / 10000000).toFixed(2);
+              } else if (maxNum > 10000 && maxNum < 10000000) {
+                value = value / 10000;
+              }
+              return value;
+            },
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        series: [
+          {
+            data: left1.data.count,
+            type: "line",
+            showSymbol: true,
+            itemStyle: {
+              emphasis: {
+                color: "rgb(7,162,148)",
+                borderColor: "rgba(7,162,148,0.6)",
+                borderWidth: 20,
+              },
+              normal: {
+                color: "rgb(62,195,221)",
+                borderColor: "rgb(6,65,95)",
+                lineStyle: {
+                  color: "rgb(101,184,196)",
+                },
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#68e3e5",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(24, 68, 121,0)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+          },
+        ],
+      };
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201161331.vue b/.history/src/views/XQXY_20231201161331.vue
new file mode 100644
index 0000000..8331066
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161331.vue
@@ -0,0 +1,2151 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "年度销售指标完成率",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    // 年度售电量
+    ndsdl() {
+      // 假数据
+      let left1 = {
+        code: 200,
+        msg: "人数趋势图获取成功",
+        data: {
+          count: [
+            153456, 143456, 163456, 183456, 163456, 153456, 163456, 133456,
+            163456, 143456, 103456, 113456, 153456, 133456, 143456,
+          ],
+          time: [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+          ],
+        },
+      };
+      //计算最大值
+      function maxNumCount(num) {
+        let maxNum = "";
+        //将数字转化为数组
+        let max = num.toString().split("");
+        for (var i = 0; i < max.length; i++) {
+          if (i > 1) {
+            maxNum += "0";
+          }
+        }
+        //组装补0
+        if (maxNum.length > 1) {
+          if (max[1] == "9") {
+            maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+          } else {
+            maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+          }
+        } else {
+          maxNum = "100";
+        }
+        return maxNum;
+      }
+      //计算最小值
+      function minNumCount(num) {
+        if (num < 10000) {
+          return "0";
+        }
+        let minNum = "";
+        //将数字转化为数组
+        let min = num.toString().split("");
+        for (var i = 0; i < min.length; i++) {
+          //组装补0
+          if (i > 1) {
+            minNum += "0";
+          }
+        }
+        if (min[1] == "0") {
+          minNum = parseInt(min[0]) - 1 + "9" + minNum;
+        } else {
+          minNum = min[0] + parseInt(min[1]) + minNum;
+        }
+
+        return minNum;
+      }
+
+      let maxNum = Math.max(...left1.data.count);
+      let minNum = Math.min(...left1.data.count);
+      maxNum = maxNumCount(maxNum);
+      minNum = minNumCount(minNum);
+      let yName = "人数（万）";
+      if (maxNum > 9999999) {
+        yName = "人数（千万）";
+      }
+      var option;
+
+      option = {
+        grid: {
+          width: "84%",
+          height: "75%",
+          top: "20%", //生成的图片和顶部的间距
+          left: "5%",
+          bottom: "0%",
+          right: "16%",
+          containLabel: true, //为ture才会生效
+        },
+        tooltip: {
+          trigger: "axis",
+          //   axisPointer: {
+          //     type: "shadow",
+          //   },
+        },
+        xAxis: {
+          // name: "日期",
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          type: "category",
+          boundaryGap: false,
+          data: left1.data.time,
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            margin: 10,
+            // interval: 0, //使x轴上的文字显示完全,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: yName,
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          min: minNum,
+          max: maxNum,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(37,52,82)",
+            },
+          },
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            interval: 20,
+            formatter: function (value, index) {
+              if (yName.indexOf("千万") && maxNum > 10000000) {
+                value = (value / 10000000).toFixed(2);
+              } else if (maxNum > 10000 && maxNum < 10000000) {
+                value = value / 10000;
+              }
+              return value;
+            },
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        series: [
+          {
+            data: left1.data.count,
+            type: "line",
+            showSymbol: true,
+            itemStyle: {
+              emphasis: {
+                color: "rgb(7,162,148)",
+                borderColor: "rgba(7,162,148,0.6)",
+                borderWidth: 20,
+              },
+              normal: {
+                color: "rgb(62,195,221)",
+                borderColor: "rgb(6,65,95)",
+                lineStyle: {
+                  color: "rgb(101,184,196)",
+                },
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#68e3e5",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(24, 68, 121,0)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+          },
+        ],
+      };
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201161653.vue b/.history/src/views/XQXY_20231201161653.vue
new file mode 100644
index 0000000..7a81887
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161653.vue
@@ -0,0 +1,1946 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "年度销售指标完成率",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201161832.vue b/.history/src/views/XQXY_20231201161832.vue
new file mode 100644
index 0000000..4060b8d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161832.vue
@@ -0,0 +1,1946 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201161843.vue b/.history/src/views/XQXY_20231201161843.vue
new file mode 100644
index 0000000..12639f3
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161843.vue
@@ -0,0 +1,1946 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201161900.vue b/.history/src/views/XQXY_20231201161900.vue
new file mode 100644
index 0000000..51448ce
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161900.vue
@@ -0,0 +1,1946 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "180",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201161959.vue b/.history/src/views/XQXY_20231201161959.vue
new file mode 100644
index 0000000..a0ce453
--- /dev/null
+++ b/.history/src/views/XQXY_20231201161959.vue
@@ -0,0 +1,1939 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "180",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162207.vue b/.history/src/views/XQXY_20231201162207.vue
new file mode 100644
index 0000000..772c7c3
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162207.vue
@@ -0,0 +1,1939 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162348.vue b/.history/src/views/XQXY_20231201162348.vue
new file mode 100644
index 0000000..2475076
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162348.vue
@@ -0,0 +1,1974 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162402.vue b/.history/src/views/XQXY_20231201162402.vue
new file mode 100644
index 0000000..6f85ff8
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162402.vue
@@ -0,0 +1,1974 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="thrid">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162536.vue b/.history/src/views/XQXY_20231201162536.vue
new file mode 100644
index 0000000..2a36edd
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162536.vue
@@ -0,0 +1,1951 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="thrid">
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162601.vue b/.history/src/views/XQXY_20231201162601.vue
new file mode 100644
index 0000000..8217373
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162601.vue
@@ -0,0 +1,1956 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162631.vue b/.history/src/views/XQXY_20231201162631.vue
new file mode 100644
index 0000000..73d8e5b
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162631.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "1,965",
+          title2: "需求响应补贴收益",
+          money2: "1,965",
+        }
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162816.vue b/.history/src/views/XQXY_20231201162816.vue
new file mode 100644
index 0000000..eaa6b3f
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162816.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201162933.vue b/.history/src/views/XQXY_20231201162933.vue
new file mode 100644
index 0000000..4d2f69c
--- /dev/null
+++ b/.history/src/views/XQXY_20231201162933.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163039.vue b/.history/src/views/XQXY_20231201163039.vue
new file mode 100644
index 0000000..2350d19
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163039.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163110.vue b/.history/src/views/XQXY_20231201163110.vue
new file mode 100644
index 0000000..6aecc53
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163110.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163122.vue b/.history/src/views/XQXY_20231201163122.vue
new file mode 100644
index 0000000..9dd4e79
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163122.vue
@@ -0,0 +1,1962 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163134.vue b/.history/src/views/XQXY_20231201163134.vue
new file mode 100644
index 0000000..9dd4e79
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163134.vue
@@ -0,0 +1,1962 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163138.vue b/.history/src/views/XQXY_20231201163138.vue
new file mode 100644
index 0000000..9dd4e79
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163138.vue
@@ -0,0 +1,1962 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      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: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163313.vue b/.history/src/views/XQXY_20231201163313.vue
new file mode 100644
index 0000000..1966dec
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163313.vue
@@ -0,0 +1,1962 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2:[
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        }
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "月度偏差率",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163400.vue b/.history/src/views/XQXY_20231201163400.vue
new file mode 100644
index 0000000..ae7130f
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163400.vue
@@ -0,0 +1,1955 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2:[
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        }
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "月度偏差率",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163532.vue b/.history/src/views/XQXY_20231201163532.vue
new file mode 100644
index 0000000..81e6fd9
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163532.vue
@@ -0,0 +1,1955 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2:[
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        }
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201163941.vue b/.history/src/views/XQXY_20231201163941.vue
new file mode 100644
index 0000000..2a32717
--- /dev/null
+++ b/.history/src/views/XQXY_20231201163941.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["02:30", "03:30", "04:30", "05:30", "05:30"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164017.vue b/.history/src/views/XQXY_20231201164017.vue
new file mode 100644
index 0000000..ea55fcd
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164017.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164039.vue b/.history/src/views/XQXY_20231201164039.vue
new file mode 100644
index 0000000..394ba35
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164039.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164101.vue b/.history/src/views/XQXY_20231201164101.vue
new file mode 100644
index 0000000..413d16d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164101.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164122.vue b/.history/src/views/XQXY_20231201164122.vue
new file mode 100644
index 0000000..48b68ed
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164122.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164137.vue b/.history/src/views/XQXY_20231201164137.vue
new file mode 100644
index 0000000..7b1fc10
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164137.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164241.vue b/.history/src/views/XQXY_20231201164241.vue
new file mode 100644
index 0000000..c8ea3c6
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164241.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164245.vue b/.history/src/views/XQXY_20231201164245.vue
new file mode 100644
index 0000000..08cc89a
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164245.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 12,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164247.vue b/.history/src/views/XQXY_20231201164247.vue
new file mode 100644
index 0000000..c0a20e6
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164247.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 12,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 12,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164258.vue b/.history/src/views/XQXY_20231201164258.vue
new file mode 100644
index 0000000..40be3e7
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164258.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164306.vue b/.history/src/views/XQXY_20231201164306.vue
new file mode 100644
index 0000000..bf6bfca
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164306.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164410.vue b/.history/src/views/XQXY_20231201164410.vue
new file mode 100644
index 0000000..a1d9eee
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164410.vue
@@ -0,0 +1,2063 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("",this.option4)
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164422.vue b/.history/src/views/XQXY_20231201164422.vue
new file mode 100644
index 0000000..9e125e0
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164422.vue
@@ -0,0 +1,2063 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("ndsdl",this.option4)
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164513.vue b/.history/src/views/XQXY_20231201164513.vue
new file mode 100644
index 0000000..39a8f90
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164513.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("ndsdl",this.option4)
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164522.vue b/.history/src/views/XQXY_20231201164522.vue
new file mode 100644
index 0000000..c87de08
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164522.vue
@@ -0,0 +1,1911 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("ndsdl",this.option4)
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164636.vue b/.history/src/views/XQXY_20231201164636.vue
new file mode 100644
index 0000000..8de9d2d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164636.vue
@@ -0,0 +1,1911 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("ndsdl",this.option4)
+    // this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164642.vue b/.history/src/views/XQXY_20231201164642.vue
new file mode 100644
index 0000000..8de9d2d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164642.vue
@@ -0,0 +1,1911 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("ndsdl",this.option4)
+    // this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164717.vue b/.history/src/views/XQXY_20231201164717.vue
new file mode 100644
index 0000000..9e125e0
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164717.vue
@@ -0,0 +1,2063 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("ndsdl",this.option4)
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164728.vue b/.history/src/views/XQXY_20231201164728.vue
new file mode 100644
index 0000000..5219c27
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164728.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164825.vue b/.history/src/views/XQXY_20231201164825.vue
new file mode 100644
index 0000000..c62bd26
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164825.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164837.vue b/.history/src/views/XQXY_20231201164837.vue
new file mode 100644
index 0000000..6682c08
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164837.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164842.vue b/.history/src/views/XQXY_20231201164842.vue
new file mode 100644
index 0000000..6682c08
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164842.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164852.vue b/.history/src/views/XQXY_20231201164852.vue
new file mode 100644
index 0000000..9d7c87a
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164852.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201164948.vue b/.history/src/views/XQXY_20231201164948.vue
new file mode 100644
index 0000000..9d7c87a
--- /dev/null
+++ b/.history/src/views/XQXY_20231201164948.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165002.vue b/.history/src/views/XQXY_20231201165002.vue
new file mode 100644
index 0000000..1b2a86d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165002.vue
@@ -0,0 +1,2062 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          fontSize: 12,
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165006.vue b/.history/src/views/XQXY_20231201165006.vue
new file mode 100644
index 0000000..5f781f8
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165006.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165105.vue b/.history/src/views/XQXY_20231201165105.vue
new file mode 100644
index 0000000..7aaa660
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165105.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 12,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165114.vue b/.history/src/views/XQXY_20231201165114.vue
new file mode 100644
index 0000000..59b6f19
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165114.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "15%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165124.vue b/.history/src/views/XQXY_20231201165124.vue
new file mode 100644
index 0000000..1c5e342
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165124.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165150.vue b/.history/src/views/XQXY_20231201165150.vue
new file mode 100644
index 0000000..f09122f
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165150.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfx",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165302.vue b/.history/src/views/XQXY_20231201165302.vue
new file mode 100644
index 0000000..39e5c99
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165302.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165349.vue b/.history/src/views/XQXY_20231201165349.vue
new file mode 100644
index 0000000..2a2b89f
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165349.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "15%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165410.vue b/.history/src/views/XQXY_20231201165410.vue
new file mode 100644
index 0000000..39e5c99
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165410.vue
@@ -0,0 +1,2061 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 20,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165504.vue b/.history/src/views/XQXY_20231201165504.vue
new file mode 100644
index 0000000..305078a
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165504.vue
@@ -0,0 +1,2060 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165603.vue b/.history/src/views/XQXY_20231201165603.vue
new file mode 100644
index 0000000..42186ca
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165603.vue
@@ -0,0 +1,2060 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "削锋",
+            },
+            {
+              icon: "rect",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165646.vue b/.history/src/views/XQXY_20231201165646.vue
new file mode 100644
index 0000000..e1c5b06
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165646.vue
@@ -0,0 +1,2060 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "circle",
+              name: "削锋",
+            },
+            {
+              icon: "circle",
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165707.vue b/.history/src/views/XQXY_20231201165707.vue
new file mode 100644
index 0000000..e0d12e5
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165707.vue
@@ -0,0 +1,2058 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165858.vue b/.history/src/views/XQXY_20231201165858.vue
new file mode 100644
index 0000000..6066342
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165858.vue
@@ -0,0 +1,2058 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201165931.vue b/.history/src/views/XQXY_20231201165931.vue
new file mode 100644
index 0000000..4ba3f46
--- /dev/null
+++ b/.history/src/views/XQXY_20231201165931.vue
@@ -0,0 +1,2058 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201171919.vue b/.history/src/views/XQXY_20231201171919.vue
new file mode 100644
index 0000000..ffcb646
--- /dev/null
+++ b/.history/src/views/XQXY_20231201171919.vue
@@ -0,0 +1,2147 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + Math.round(845 * 100 / 100) + "}",
+                        show: true,
+                        x: "center",
+                        y: "36%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(16),
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: fontSizeRem(12),
+                            color: "#fff",
+                        },
+                    },
+                ],
+                polar: {
+                    center: ["50%", "40%"],
+                    radius: ["60%", "75%"],
+                },
+                angleAxis: {
+                    max: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        name: "",
+                        type: "bar",
+                        roundCap: true,
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: "rgba(19, 84, 146, .4)",
+                        },
+                        coordinateSystem: "polar",
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#005DCF",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#00CCFF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201171927.vue b/.history/src/views/XQXY_20231201171927.vue
new file mode 100644
index 0000000..ffcb646
--- /dev/null
+++ b/.history/src/views/XQXY_20231201171927.vue
@@ -0,0 +1,2147 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + Math.round(845 * 100 / 100) + "}",
+                        show: true,
+                        x: "center",
+                        y: "36%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(16),
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: fontSizeRem(12),
+                            color: "#fff",
+                        },
+                    },
+                ],
+                polar: {
+                    center: ["50%", "40%"],
+                    radius: ["60%", "75%"],
+                },
+                angleAxis: {
+                    max: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        name: "",
+                        type: "bar",
+                        roundCap: true,
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: "rgba(19, 84, 146, .4)",
+                        },
+                        coordinateSystem: "polar",
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#005DCF",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#00CCFF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201171930.vue b/.history/src/views/XQXY_20231201171930.vue
new file mode 100644
index 0000000..c535a7e
--- /dev/null
+++ b/.history/src/views/XQXY_20231201171930.vue
@@ -0,0 +1,2236 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + Math.round(845 * 100 / 100) + "}",
+                        show: true,
+                        x: "center",
+                        y: "36%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(16),
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: fontSizeRem(12),
+                            color: "#fff",
+                        },
+                    },
+                ],
+                polar: {
+                    center: ["50%", "40%"],
+                    radius: ["60%", "75%"],
+                },
+                angleAxis: {
+                    max: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        name: "",
+                        type: "bar",
+                        roundCap: true,
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: "rgba(19, 84, 146, .4)",
+                        },
+                        coordinateSystem: "polar",
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#005DCF",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#00CCFF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+            circles1: {
+                // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+                title: [
+                    // {
+                    //     text: "单位：%",
+                    //     top: 0,
+                    //     left: 0,
+                    //     textStyle: {
+                    //         fontWeight: "normal",
+                    //         fontSize: 16,
+                    //         color: "#fff",
+                    //     },
+                    // },
+                    {
+                        text: "{a|" + Math.round(845 * 100 / 100) + "}",
+                        show: true,
+                        x: "center",
+                        y: "36%",
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: fontSizeRem(16),
+                                    color: "#FFFFFF",
+                                    fontWeight: "bold",
+                                },
+                            },
+                        },
+                    },
+                    {
+                        text: '电力',
+                        x: "center",
+                        y: "50%",
+                        borderColor: "#fff",
+                        textStyle: {
+                            fontWeight: "normal",
+                            fontSize: fontSizeRem(12),
+                            color: "#fff",
+                        },
+                    },
+                ],
+                polar: {
+                    center: ["50%", "40%"],
+                    radius: ["60%", "75%"],
+                },
+                angleAxis: {
+                    max: 1000,
+                    show: false,
+                },
+                radiusAxis: {
+                    type: "category",
+                    show: true,
+                    axisLabel: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                },
+                series: [
+                    {
+                        data: [845],
+                        name: "",
+                        type: "bar",
+                        roundCap: true,
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: "rgba(19, 84, 146, .4)",
+                        },
+                        coordinateSystem: "polar",
+                        itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                    {
+                                        offset: 0,
+                                        color: "#005DCF",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#00CCFF",
+                                    },
+                                ]),
+                            },
+                        },
+                    },
+                ],
+            },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb",this.option4)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201171937.vue b/.history/src/views/XQXY_20231201171937.vue
new file mode 100644
index 0000000..ecc5ff3
--- /dev/null
+++ b/.history/src/views/XQXY_20231201171937.vue
@@ -0,0 +1,2236 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201171940.vue b/.history/src/views/XQXY_20231201171940.vue
new file mode 100644
index 0000000..aa5ec56
--- /dev/null
+++ b/.history/src/views/XQXY_20231201171940.vue
@@ -0,0 +1,2236 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172019.vue b/.history/src/views/XQXY_20231201172019.vue
new file mode 100644
index 0000000..aa5ec56
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172019.vue
@@ -0,0 +1,2236 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172135.vue b/.history/src/views/XQXY_20231201172135.vue
new file mode 100644
index 0000000..2604907
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172135.vue
@@ -0,0 +1,2238 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("",this.circles1);
+    this.defineEcharts("",this.circles2)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172151.vue b/.history/src/views/XQXY_20231201172151.vue
new file mode 100644
index 0000000..ed052fa
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172151.vue
@@ -0,0 +1,2238 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye",this.circles1);
+    this.defineEcharts("xuefeng",this.circles2)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172235.vue b/.history/src/views/XQXY_20231201172235.vue
new file mode 100644
index 0000000..32df0f8
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172235.vue
@@ -0,0 +1,2238 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye",this.circles1);
+    this.defineEcharts("xuefeng",this.circles2)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172456.vue b/.history/src/views/XQXY_20231201172456.vue
new file mode 100644
index 0000000..05edbbe
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172456.vue
@@ -0,0 +1,2246 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye",this.circles1);
+    this.defineEcharts("xuefeng",this.circles2)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172509.vue b/.history/src/views/XQXY_20231201172509.vue
new file mode 100644
index 0000000..0833d33
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172509.vue
@@ -0,0 +1,2246 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye",this.circles1);
+    this.defineEcharts("xuefeng",this.circles2)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201172532.vue b/.history/src/views/XQXY_20231201172532.vue
new file mode 100644
index 0000000..0cf535d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201172532.vue
@@ -0,0 +1,2247 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+      circles1: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+      circles2: {
+        // backgroundColor: 'rgba(16, 33, 71)', //设置背景颜色
+        title: [
+          // {
+          //     text: "单位：%",
+          //     top: 0,
+          //     left: 0,
+          //     textStyle: {
+          //         fontWeight: "normal",
+          //         fontSize: 16,
+          //         color: "#fff",
+          //     },
+          // },
+          {
+            text: "{a|" + Math.round((845 * 100) / 100) + "}",
+            show: true,
+            x: "center",
+            y: "36%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: fontSizeRem(16),
+                  color: "#FFFFFF",
+                  fontWeight: "bold",
+                },
+              },
+            },
+          },
+          {
+            text: "电力",
+            x: "center",
+            y: "50%",
+            borderColor: "#fff",
+            textStyle: {
+              fontWeight: "normal",
+              fontSize: fontSizeRem(12),
+              color: "#fff",
+            },
+          },
+        ],
+        polar: {
+          center: ["50%", "40%"],
+          radius: ["60%", "75%"],
+        },
+        angleAxis: {
+          max: 1000,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            data: [845],
+            name: "",
+            type: "bar",
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(19, 84, 146, .4)",
+            },
+            coordinateSystem: "polar",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#005DCF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00CCFF",
+                  },
+                ]),
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye",this.circles1);
+    this.defineEcharts("xuefeng",this.circles2)
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201173937.vue b/.history/src/views/XQXY_20231201173937.vue
new file mode 100644
index 0000000..078ca26
--- /dev/null
+++ b/.history/src/views/XQXY_20231201173937.vue
@@ -0,0 +1,1986 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 21,
+          name: "市场签约1",
+        },
+        {
+          value: 38,
+          name: "市场签约2",
+        },
+      ];
+      var rich = {
+        yellow: {
+          color: "#3bc7ff",
+          fontSize: 14 * scale,
+          padding: [8, 0],
+          align: "center",
+        },
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+        blue: {
+          color: "#3bc7ff",
+          fontSize: 18 * scale,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#a2c7f3",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          // data: ['高等教育学'],
+          // itemGap: 50,
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: [
+              "#fc962c",
+              "#d83472",
+              "#0F9AF8",
+              "#2B63D5",
+              "#2039C3",
+              "#2ECACE",
+              "#6F81DA",
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+    },
+    
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174010.vue b/.history/src/views/XQXY_20231201174010.vue
new file mode 100644
index 0000000..db59684
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174010.vue
@@ -0,0 +1,1986 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 78.21,
+          name: "85.2",
+        },
+        {
+          value: 38,
+          name: "市场签约2",
+        },
+      ];
+      var rich = {
+        yellow: {
+          color: "#3bc7ff",
+          fontSize: 14 * scale,
+          padding: [8, 0],
+          align: "center",
+        },
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+        blue: {
+          color: "#3bc7ff",
+          fontSize: 18 * scale,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#a2c7f3",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          // data: ['高等教育学'],
+          // itemGap: 50,
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: [
+              "#fc962c",
+              "#d83472",
+              "#0F9AF8",
+              "#2B63D5",
+              "#2039C3",
+              "#2ECACE",
+              "#6F81DA",
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+    },
+    
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174024.vue b/.history/src/views/XQXY_20231201174024.vue
new file mode 100644
index 0000000..6ac14b7
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174024.vue
@@ -0,0 +1,1986 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 38,
+          name: "市场签约2",
+        },
+      ];
+      var rich = {
+        yellow: {
+          color: "#3bc7ff",
+          fontSize: 14 * scale,
+          padding: [8, 0],
+          align: "center",
+        },
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+        blue: {
+          color: "#3bc7ff",
+          fontSize: 18 * scale,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#a2c7f3",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          // data: ['高等教育学'],
+          // itemGap: 50,
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: [
+              "#fc962c",
+              "#d83472",
+              "#0F9AF8",
+              "#2B63D5",
+              "#2039C3",
+              "#2ECACE",
+              "#6F81DA",
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+    },
+    
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174042.vue b/.history/src/views/XQXY_20231201174042.vue
new file mode 100644
index 0000000..733b263
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174042.vue
@@ -0,0 +1,1986 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        yellow: {
+          color: "#3bc7ff",
+          fontSize: 14 * scale,
+          padding: [8, 0],
+          align: "center",
+        },
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+        blue: {
+          color: "#3bc7ff",
+          fontSize: 18 * scale,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#a2c7f3",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          // data: ['高等教育学'],
+          // itemGap: 50,
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: [
+              "#fc962c",
+              "#d83472",
+              "#0F9AF8",
+              "#2B63D5",
+              "#2039C3",
+              "#2ECACE",
+              "#6F81DA",
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+    },
+    
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174136.vue b/.history/src/views/XQXY_20231201174136.vue
new file mode 100644
index 0000000..e9184d7
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174136.vue
@@ -0,0 +1,1975 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        yellow: {
+          color: "#3bc7ff",
+          fontSize: 14 * scale,
+          padding: [8, 0],
+          align: "center",
+        },
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+        blue: {
+          color: "#3bc7ff",
+          fontSize: 18 * scale,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#a2c7f3",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174228.vue b/.history/src/views/XQXY_20231201174228.vue
new file mode 100644
index 0000000..8bbf6dd
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174228.vue
@@ -0,0 +1,1958 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174315.vue b/.history/src/views/XQXY_20231201174315.vue
new file mode 100644
index 0000000..6d3744b
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174315.vue
@@ -0,0 +1,1959 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye",option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174359.vue b/.history/src/views/XQXY_20231201174359.vue
new file mode 100644
index 0000000..a3adb71
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174359.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye{
+            width:50%;
+            height:100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174512.vue b/.history/src/views/XQXY_20231201174512.vue
new file mode 100644
index 0000000..57a875d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174512.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye{
+            width:50%;
+            height:100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174518.vue b/.history/src/views/XQXY_20231201174518.vue
new file mode 100644
index 0000000..4389e51
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174518.vue
@@ -0,0 +1,1965 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye{
+            width:50%;
+            height:100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201174557.vue b/.history/src/views/XQXY_20231201174557.vue
new file mode 100644
index 0000000..db810bc
--- /dev/null
+++ b/.history/src/views/XQXY_20231201174557.vue
@@ -0,0 +1,1965 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175027.vue b/.history/src/views/XQXY_20231201175027.vue
new file mode 100644
index 0000000..db810bc
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175027.vue
@@ -0,0 +1,1965 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 60 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175059.vue b/.history/src/views/XQXY_20231201175059.vue
new file mode 100644
index 0000000..047ea2a
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175059.vue
@@ -0,0 +1,1965 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18 ,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18 * scale,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175117.vue b/.history/src/views/XQXY_20231201175117.vue
new file mode 100644
index 0000000..c525dbd
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175117.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: true,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175147.vue b/.history/src/views/XQXY_20231201175147.vue
new file mode 100644
index 0000000..4ea7009
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175147.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175233.vue b/.history/src/views/XQXY_20231201175233.vue
new file mode 100644
index 0000000..2f70cbe
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175233.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    // this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175241.vue b/.history/src/views/XQXY_20231201175241.vue
new file mode 100644
index 0000000..fdd997f
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175241.vue
@@ -0,0 +1,1965 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    // this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175328.vue b/.history/src/views/XQXY_20231201175328.vue
new file mode 100644
index 0000000..96d8a77
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175328.vue
@@ -0,0 +1,1968 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    // this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1{
+            display: flex;
+            justify-content: space-around;
+          }
+          #gongye {
+            width: 50%;
+            height: 100px;
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175333.vue b/.history/src/views/XQXY_20231201175333.vue
new file mode 100644
index 0000000..52de5eb
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175333.vue
@@ -0,0 +1,1969 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    // this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1{
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+            width: 50%;
+            height: 100px;
+          }
+          }
+
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175336.vue b/.history/src/views/XQXY_20231201175336.vue
new file mode 100644
index 0000000..7b572bd
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175336.vue
@@ -0,0 +1,1968 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    // this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 50%;
+              height: 100px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175420.vue b/.history/src/views/XQXY_20231201175420.vue
new file mode 100644
index 0000000..1df6d15
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175420.vue
@@ -0,0 +1,1968 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    // this.yhhyzb();
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175648.vue b/.history/src/views/XQXY_20231201175648.vue
new file mode 100644
index 0000000..8b2359d
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175648.vue
@@ -0,0 +1,1967 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175749.vue b/.history/src/views/XQXY_20231201175749.vue
new file mode 100644
index 0000000..54742df
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175749.vue
@@ -0,0 +1,1966 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.defineEcharts("gongye", this.circles1);
+    this.defineEcharts("xuefeng", this.circles2);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175902.vue b/.history/src/views/XQXY_20231201175902.vue
new file mode 100644
index 0000000..f2c662c
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175902.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        backgroundColor: "#031f2d",
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175923.vue b/.history/src/views/XQXY_20231201175923.vue
new file mode 100644
index 0000000..6bca9b0
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175923.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 18,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175928.vue b/.history/src/views/XQXY_20231201175928.vue
new file mode 100644
index 0000000..cd07877
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175928.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201175937.vue b/.history/src/views/XQXY_20231201175937.vue
new file mode 100644
index 0000000..508b8ef
--- /dev/null
+++ b/.history/src/views/XQXY_20231201175937.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 32,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 18,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180012.vue b/.history/src/views/XQXY_20231201180012.vue
new file mode 100644
index 0000000..77502d2
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180012.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 96px;
+              height: 96px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180047.vue b/.history/src/views/XQXY_20231201180047.vue
new file mode 100644
index 0000000..68e028c
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180047.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 160px;
+              height: 160px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180120.vue b/.history/src/views/XQXY_20231201180120.vue
new file mode 100644
index 0000000..23acc1e
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180120.vue
@@ -0,0 +1,1963 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180202.vue b/.history/src/views/XQXY_20231201180202.vue
new file mode 100644
index 0000000..d5aa036
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180202.vue
@@ -0,0 +1,1964 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          show:true,
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180211.vue b/.history/src/views/XQXY_20231201180211.vue
new file mode 100644
index 0000000..21c65c5
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180211.vue
@@ -0,0 +1,1967 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          show:true,
+          data:[
+
+          ],
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "总考生数量",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180254.vue b/.history/src/views/XQXY_20231201180254.vue
new file mode 100644
index 0000000..1fc7cf9
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180254.vue
@@ -0,0 +1,1967 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "总得分",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          show:true,
+          data:[
+
+          ],
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180301.vue b/.history/src/views/XQXY_20231201180301.vue
new file mode 100644
index 0000000..cd8caba
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180301.vue
@@ -0,0 +1,1967 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          show:true,
+          data:[
+
+          ],
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180412.vue b/.history/src/views/XQXY_20231201180412.vue
new file mode 100644
index 0000000..6ef113b
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180412.vue
@@ -0,0 +1,1969 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data:[
+
+          ],
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180446.vue b/.history/src/views/XQXY_20231201180446.vue
new file mode 100644
index 0000000..a37d577
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180446.vue
@@ -0,0 +1,1970 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data:[
+          {name:"工业"},
+          {name:"楼宇"},
+          ],
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180450.vue b/.history/src/views/XQXY_20231201180450.vue
new file mode 100644
index 0000000..d48a881
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180450.vue
@@ -0,0 +1,1967 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [{ name: "工业" }, { name: "楼宇" }],
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180624.vue b/.history/src/views/XQXY_20231201180624.vue
new file mode 100644
index 0000000..19fa684
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180624.vue
@@ -0,0 +1,1966 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0;
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180630.vue b/.history/src/views/XQXY_20231201180630.vue
new file mode 100644
index 0000000..ddb9925
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180630.vue
@@ -0,0 +1,1966 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var total = 0;
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180748.vue b/.history/src/views/XQXY_20231201180748.vue
new file mode 100644
index 0000000..8f9e3f3
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180748.vue
@@ -0,0 +1,1967 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var total = 0;
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180757.vue b/.history/src/views/XQXY_20231201180757.vue
new file mode 100644
index 0000000..6760122
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180757.vue
@@ -0,0 +1,1965 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var total = 0;
+            var percent;
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            const item = echartData.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            return "{total|" + percent + "}{white|%}";
+          },
+          data: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180847.vue b/.history/src/views/XQXY_20231201180847.vue
new file mode 100644
index 0000000..b6260e8
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180847.vue
@@ -0,0 +1,1969 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          data: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180851.vue b/.history/src/views/XQXY_20231201180851.vue
new file mode 100644
index 0000000..11bc37e
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180851.vue
@@ -0,0 +1,1969 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += trafficWay[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: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201180914.vue b/.history/src/views/XQXY_20231201180914.vue
new file mode 100644
index 0000000..1a9ee59
--- /dev/null
+++ b/.history/src/views/XQXY_20231201180914.vue
@@ -0,0 +1,1977 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += trafficWay[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: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/XQXY_20231201181046.vue b/.history/src/views/XQXY_20231201181046.vue
new file mode 100644
index 0000000..1a9ee59
--- /dev/null
+++ b/.history/src/views/XQXY_20231201181046.vue
@@ -0,0 +1,1977 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option1: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += trafficWay[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: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/ZHDY_20231201161342.vue b/.history/src/views/ZHDY_20231201161342.vue
new file mode 100644
index 0000000..2c3c896
--- /dev/null
+++ b/.history/src/views/ZHDY_20231201161342.vue
@@ -0,0 +1,1880 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>智慧售电云平台</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="ndqyyh">
+                    <p class="title">年度签约用户</p>
+                    <div class="bg_title">
+                        <p class="tit_first">2451<span class="tit_danwei">户</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>同比</p>
+                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
+                            </div>
+                            <div>
+                                <p>环比</p>
+                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="qyyh"></div>
+                </div>
+                <div class="ndsdl">
+                    <p class="title">年度售电量</p>
+                    <div class="bg_title">
+                        <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>同比</p>
+                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
+                            </div>
+                            <div>
+                                <p>环比</p>
+                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ndsdl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ndsdje">
+                    <p class="title">年度售电金额</p>
+                    <div id="ndsdje">
+                        <div class="infos" v-for="(item, index) in lists" :key="index">
+                            <div class="first">
+                                <p>
+                                    <img src="../assets/zhsdy/组 3189.png" alt="">
+                                    <span class="titles">{{ item.title }}</span>
+                                </p>
+                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
+                            </div>
+                            <div class="second">
+                                <div class="s_tit">
+                                    <div>
+                                        <p>同比</p>
+                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
+                                                alt=""></p>
+                                    </div>
+                                    <div>
+                                        <p>环比</p>
+                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
+                                                alt="">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="bigBox">
+                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pcfx">
+                    <p class="title">偏差分析</p>
+                    <div id="pcfx">
+                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+                            <div class="pc_l">
+                                <img src="../assets/zhsdy/组 3192.png" alt="">
+                                <span class="pc_name">{{ item.name }}</span>
+                                <span class="pc_count">{{ item.count }}</span>
+                                <span class="pc_danwei">{{ item.danwei }}</span>
+                            </div>
+                            <div class="pc_r">
+                                <p>环比</p>
+                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                        <div id="pcfxb"></div>
+                    </div>
+                </div>
+                <div class="yhhyzb">
+                    <p class="title">用户行业占比</p>
+                    <div id="yhhyzb"></div>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer">
+                <div class="ndqylfb">
+                    <p class="title">年度签约量分布</p>
+                    <div id="ndqylfb"></div>
+                </div>
+                <div class="ggzcxx">
+                    <p class="title">公告政策信息</p>
+                    <div id="ggzcxx">
+                        <ul>
+                            <li v-for="(item, index) in infos">
+                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
+                                <span class="times">{{ item.time }}</span>
+                                <span class="info">{{ item.info }}</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "电",
+            option: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '12%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：MWh",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    data: [760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300, 400],
+                    barWidth: '30%',
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                            }], false),
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 4,
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            lineHeight: 10,
+                            formatter: '{c}',
+                            position: 'top',
+                            textStyle: {
+                                color: '#00D6F9',
+                                fontSize: 12
+                            }
+
+                        }
+                    }
+                }]
+            },
+            infos: [
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+            ],
+            lists: [
+                {
+                    title: "年度销售指标完成率",
+                    money: "7,965",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "80",
+                },
+                {
+                    title: "年度收益金额",
+                    money: "5,665",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "40",
+                }
+            ],
+            pclist: [
+                {
+                    name: "月度偏差电量",
+                    count: "5514",
+                    danwei: "MWh",
+                    hb: "27.16"
+                },
+                {
+                    name: "月度偏差率",
+                    count: "25",
+                    danwei: "%",
+                    hb: "27.16"
+                },
+            ]
+        };
+    },
+    methods: {
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+        qyyh() {
+            let option = {
+                // backgroundColor: '#081736',
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        lineStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(0, 255, 233,0)'
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(255, 255, 255,1)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0, 255, 233,0)'
+                                    }
+                                ],
+                                global: false
+                            }
+                        }
+                    }
+                },
+
+                grid: {
+                    top: '12%',
+                    left: '10%',
+                    right: '10%',
+                    bottom: '25%'
+                    // containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#009dff'
+                            }
+                        },
+
+                        axisLabel: {
+                            color: '#fff',
+                            width: 100
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#00BFF3',
+                                opacity: 0.23
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        boundaryGap: false,
+                        data: [
+                            "01",
+                            "02",
+                            "03",
+                            "04",
+                            "05",
+                            "06",
+                            "07",
+                            "08",
+                            "09",
+                            "10",
+                            "11",
+                            "12",
+                        ] //this.$moment(data.times).format("HH-mm") ,
+                    }
+                ],
+
+                yAxis: [
+                    {
+                        type: 'value',
+                        min: 0,
+                        // max: 140,
+                        splitNumber: 4,
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#00BFF3',
+                                opacity: 0.23
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#009dff'
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            margin: 20,
+                            textStyle: {
+                                color: '#fff'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '',
+                        type: 'line',
+                        smooth: true,
+                        showAllSymbol: true,
+                        // symbol: 'circle',
+                        symbolSize: 2,
+                        lineStyle: {
+                            normal: {
+                                color: '#2CABE3'
+                            }
+                        },
+                        itemStyle: {
+                            color: '#2CABE3',
+                            borderColor: '#2CABE3',
+                            borderWidth: 2
+                        },
+                        data: [
+                            4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3,
+                            5, 8
+                        ] //data.values
+                    },
+                    {
+                        name: '',
+                        type: 'line',
+                        smooth: true,
+                        showAllSymbol: true,
+                        // symbol: 'circle',
+                        symbolSize: 2,
+                        lineStyle: {
+                            normal: {
+                                color: '#7def86'
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#7def86',
+                                borderColor: 'rgba(0, 255, 240, 1)',
+                                lineStyle: {
+                                    color: 'rgba(0, 255, 240, 1)'
+                                }
+                            }
+                        },
+                        data: [
+                            3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1,
+                            7, 6
+                        ] //data.values
+                    }
+                ]
+            };
+            this.defineEcharts("qyyh", option)
+        },
+        // 年度售电量
+        ndsdl() {
+            // 假数据
+            let left1 = {
+                code: 200,
+                msg: "人数趋势图获取成功",
+                data: {
+                    count: [
+                        153456,
+                        143456,
+                        163456,
+                        183456,
+                        163456,
+                        153456,
+                        163456,
+                        133456,
+                        163456,
+                        143456,
+                        103456,
+                        113456,
+                        153456,
+                        133456,
+                        143456
+                    ],
+                    time: [
+                        "01",
+                        "02",
+                        "03",
+                        "04",
+                        "05",
+                        "06",
+                        "07",
+                        "08",
+                        "09",
+                        "10",
+                        "11",
+                        "12"
+                    ]
+                }
+            };
+            //计算最大值
+            function maxNumCount(num) {
+                let maxNum = "";
+                //将数字转化为数组
+                let max = num.toString().split("");
+                for (var i = 0; i < max.length; i++) {
+                    if (i > 1) {
+                        maxNum += "0";
+                    }
+                }
+                //组装补0
+                if (maxNum.length > 1) {
+                    if (max[1] == "9") {
+                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+                    } else {
+                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+                    }
+                } else {
+                    maxNum = "100";
+                }
+                return maxNum;
+            }
+            //计算最小值
+            function minNumCount(num) {
+                if (num < 10000) {
+                    return "0";
+                }
+                let minNum = "";
+                //将数字转化为数组
+                let min = num.toString().split("");
+                for (var i = 0; i < min.length; i++) {
+                    //组装补0
+                    if (i > 1) {
+                        minNum += "0";
+                    }
+                }
+                if (min[1] == "0") {
+                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
+                } else {
+                    minNum = min[0] + parseInt(min[1]) + minNum;
+                }
+
+                return minNum;
+            }
+
+            let maxNum = Math.max(...left1.data.count);
+            let minNum = Math.min(...left1.data.count);
+            maxNum = maxNumCount(maxNum);
+            minNum = minNumCount(minNum);
+            let yName = "人数（万）";
+            if (maxNum > 9999999) {
+                yName = "人数（千万）";
+            }
+            var option;
+
+            option = {
+                grid: {
+                    width: "84%",
+                    height: "75%",
+                    top: "20%", //生成的图片和顶部的间距
+                    left: "5%",
+                    bottom: "0%",
+                    right: "16%",
+                    containLabel: true //为ture才会生效
+                },
+                tooltip: {
+                    trigger: "axis"
+                    //   axisPointer: {
+                    //     type: "shadow",
+                    //   },
+                },
+                xAxis: {
+                    // name: "日期",
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    type: "category",
+                    boundaryGap: false,
+                    data: left1.data.time,
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        margin: 10
+                        // interval: 0, //使x轴上的文字显示完全,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    name: yName,
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    min: minNum,
+                    max: maxNum,
+                    axisLine: {
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        },
+                        show: true
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(37,52,82)"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        interval: 20,
+                        formatter: function (value, index) {
+                            if (yName.indexOf("千万") && maxNum > 10000000) {
+                                value = (value / 10000000).toFixed(2);
+                            } else if (maxNum > 10000 && maxNum < 10000000) {
+                                value = value / 10000;
+                            }
+                            return value;
+                        }
+                    }
+                },
+                splitLine: {
+                    show: false
+                },
+                series: [
+                    {
+                        data: left1.data.count,
+                        type: "line",
+                        showSymbol: true,
+                        itemStyle: {
+                            emphasis: {
+                                color: "rgb(7,162,148)",
+                                borderColor: "rgba(7,162,148,0.6)",
+                                borderWidth: 20
+                            },
+                            normal: {
+                                color: "rgb(62,195,221)",
+                                borderColor: "rgb(6,65,95)",
+                                lineStyle: {
+                                    color: "rgb(101,184,196)"
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#68e3e5"
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(24, 68, 121,0)"
+                                        }
+                                    ],
+                                    false
+                                )
+                            }
+                        }
+                    }
+                ]
+            };
+        },
+        //偏差分析
+        pcfx() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+            }
+            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位MWh",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: -20,
+                max: 30,
+                axisLabel: {
+                    formatter: "{value}" + "%",
+                    textStyle: { fontSize: 12, color: '#fff' }
+                }
+            }]
+
+            // series
+            const series = [
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
+                        }
+                    },
+                },
+                {
+                    z: 2,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced2,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '销售电价', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData2
+                }]
+            let option = { xAxis, yAxis, series, grid }
+            this.defineEcharts("pcfxb", option);
+        },
+        yhhyzb() {
+            var trafficWay = [{
+                name: '钢铁',
+                value: 280
+            }, {
+                name: '水泥',
+                value: 280
+            }, {
+                name: '化工',
+                value: 280
+            }, {
+                name: '制造',
+                value: 280
+            }, {
+                name: '其他',
+                value: 280
+            }];
+            var data = [];
+            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                center: ["36%", '50%'],
+                radius: [105, 109],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                color: color,
+                title: {
+                    text: '28%',
+                    subtext: "钢铁",
+                    top: '48%',
+                    textAlign: "center",
+                    left: "35%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    },
+                    subtextStyle: {
+                        fontFamily: "微软雅黑",
+                        fontSize: 16,
+                        color: '#fff',
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [{
+                        name: '钢铁',
+                        value: 280
+                    }, {
+                        name: '水泥',
+                        value: 280
+                    }, {
+                        name: '化工',
+                        value: 280
+                    }, {
+                        name: '制造',
+                        value: 280
+                    }, {
+                        name: '其他',
+                        value: 280
+                    }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 320,
+                    bottom: 145,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 12,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            this.defineEcharts("yhhyzb", option)
+        },
+    },
+    mounted() {
+        this.defineEcharts("ndqylfb", this.option);
+        // this.defineEcharts("ynl", this.option1);
+        this.qyyh();
+        this.pcfx();
+        this.yhhyzb();
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ndqyyh {
+                // height: 27.22vh;
+                height: 294px;
+                //   width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            width: 14px;
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                width: 28px;
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #qyyh {
+                    width: 100%;
+                    height: 180px;
+                    margin-top: 100px;
+                }
+            }
+
+            .ndsdl {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            width: 14px;
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                width: 28px;
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #ndsdl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .ndsdje {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ndsdje {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 50px;
+
+                    .infos {
+                        width: 396px;
+                        height: 104px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url(../assets/zhsdy/组\ 3168.png);
+                        background-size: cover;
+                        margin: 0 auto;
+                        margin-bottom: 15px;
+
+                        .first {
+                            width: 180px;
+
+                            p:nth-child(1) {
+                                width: 180px;
+                                height: 44px;
+                                display: flex;
+                                justify-content: space-between;
+
+                                img {
+                                    width: 15px;
+                                    height: 15px;
+                                    border: none;
+                                    display: block;
+                                    margin-top: 10px;
+                                    margin-left: 10px;
+                                }
+
+                                span.titles {
+                                    width: 140px;
+                                    height: 44px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 44px;
+                                    display: block;
+                                }
+                            }
+
+                            p.money {
+                                width: 145px;
+                                height: 44px;
+                                font-size: 40px;
+                                font-weight: 700;
+                                color: #52C2FF;
+                                line-height: 44px;
+
+                                .danwei {
+                                    color: #fff;
+                                    font-size: 14px;
+                                }
+                            }
+                        }
+
+                        .second {
+                            width: 172px;
+                            height: 100%;
+
+                            div.s_tit {
+                                width: 172px;
+                                display: flex;
+                                justify-content: space-around;
+
+                                p:nth-child(1) {
+                                    width: 28px;
+                                    height: 36px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 36px;
+                                }
+
+                                p.tb_percent {
+                                    width: 57px;
+                                    height: 30px;
+                                    font-size: 16px;
+                                    font-weight: 700;
+                                    color: #F2B810;
+                                    line-height: 30px;
+                                    display: flex;
+
+                                    img {
+                                        width: 12px;
+                                        height: 12px;
+                                        margin-top: 8px;
+                                    }
+                                }
+                            }
+
+                            .bigBox {
+                                width: 172px;
+                                height: 10px;
+                                background-color: #273546;
+                                border-radius: 67px 67px 67px 67px;
+                                margin-top: 5px;
+
+                                .smallBox {
+                                    width: 100px;
+                                    height: 10px;
+                                    border-radius: 67px 67px 67px 67px;
+                                    background: linear-gradient(to right,
+                                            rgba(38, 206, 253, 1) 20%,
+                                            rgba(42, 254, 255, 1) 100%,
+                                            rgba(38, 206, 253, 1) 20%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pcfx {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #pcfx {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 40px;
+
+                    .pc_tit {
+                        width: 398px;
+                        height: 48px;
+                        margin: 0 auto;
+                        background: url(../assets/zhsdy/组\ 3169.png);
+                        background-size: cover;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 5px;
+
+                        .pc_l {
+                            width: 272px;
+                            height: 48px;
+                            display: flex;
+                            justify-content: flex-start;
+
+                            .pc_name {
+                                margin-left: 18px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            img {
+                                width: 15px;
+                                height: 15px;
+                                margin-top: 18px;
+                                margin-left: 10px;
+                            }
+
+                            .pc_count {
+                                margin-left: 14px;
+                                height: 44px;
+                                font-size: 24px;
+                                font-weight: 700;
+                                color: #0AA7FF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            .pc_danwei {
+                                margin-left: 6px;
+                                width: 33px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                            }
+                        }
+
+                        .pc_r {
+                            margin-right: 20px;
+
+                            p:nth-child(1) {
+                                width: 28px;
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 24px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 24px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 8px;
+                                }
+                            }
+                        }
+                    }
+
+                    #pcfxb {
+                        width: 100%;
+                        height: 150px;
+                    }
+                }
+            }
+
+            .yhhyzb {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #yhhyzb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 1445px;
+            height: 325px;
+            bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .ndqylfb {
+                width: 776px;
+                height: 100%;
+                background: url(../assets/zhsdy/用能量-框.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    transform: translateX(-50%);
+                    line-height: 36px;
+                }
+
+                #ndqylfb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .ggzcxx {
+                width: 653px;
+                height: 325px;
+                background: url(../assets/zhsdy/组\ 3120.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                    transform: translateX(-50%);
+                }
+
+                #ggzcxx {
+                    width: 100%;
+                    margin-top: 60px;
+
+                    ul {
+                        width: 100%;
+
+
+                        li {
+                            width: 100%;
+                            height: 40px;
+                            padding: 0px 36px 0px 18px;
+                            box-sizing: border-box;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .img {
+                                width: 12px;
+                                height: 12px;
+                                display: block;
+                            }
+
+                            .times {
+                                width: 145px;
+                                height: 36px;
+                                color: #52C2FF;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .info {
+                                width: 381px;
+                                height: 36px;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+                        }
+
+                        li:nth-child(2n+2) {
+                            background: #0E2C7E;
+                        }
+                    }
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231201161347.vue b/.history/src/views/ZHDY_20231201161347.vue
new file mode 100644
index 0000000..2c3c896
--- /dev/null
+++ b/.history/src/views/ZHDY_20231201161347.vue
@@ -0,0 +1,1880 @@
+<template>
+    <div class="box">
+        <div class="title">
+            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+            <p>智慧售电云平台</p>
+            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+        </div>
+        <div class="containter">
+            <div class="left">
+                <div class="ndqyyh">
+                    <p class="title">年度签约用户</p>
+                    <div class="bg_title">
+                        <p class="tit_first">2451<span class="tit_danwei">户</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>同比</p>
+                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
+                            </div>
+                            <div>
+                                <p>环比</p>
+                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="qyyh"></div>
+                </div>
+                <div class="ndsdl">
+                    <p class="title">年度售电量</p>
+                    <div class="bg_title">
+                        <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
+                        <div class="tit_second">
+                            <div>
+                                <p>同比</p>
+                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
+                            </div>
+                            <div>
+                                <p>环比</p>
+                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="ndsdl"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ndsdje">
+                    <p class="title">年度售电金额</p>
+                    <div id="ndsdje">
+                        <div class="infos" v-for="(item, index) in lists" :key="index">
+                            <div class="first">
+                                <p>
+                                    <img src="../assets/zhsdy/组 3189.png" alt="">
+                                    <span class="titles">{{ item.title }}</span>
+                                </p>
+                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
+                            </div>
+                            <div class="second">
+                                <div class="s_tit">
+                                    <div>
+                                        <p>同比</p>
+                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
+                                                alt=""></p>
+                                    </div>
+                                    <div>
+                                        <p>环比</p>
+                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
+                                                alt="">
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="bigBox">
+                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="pcfx">
+                    <p class="title">偏差分析</p>
+                    <div id="pcfx">
+                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+                            <div class="pc_l">
+                                <img src="../assets/zhsdy/组 3192.png" alt="">
+                                <span class="pc_name">{{ item.name }}</span>
+                                <span class="pc_count">{{ item.count }}</span>
+                                <span class="pc_danwei">{{ item.danwei }}</span>
+                            </div>
+                            <div class="pc_r">
+                                <p>环比</p>
+                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
+                            </div>
+                        </div>
+                        <div id="pcfxb"></div>
+                    </div>
+                </div>
+                <div class="yhhyzb">
+                    <p class="title">用户行业占比</p>
+                    <div id="yhhyzb"></div>
+                </div>
+            </div>
+            <div id="map"></div>
+            <div class="footer">
+                <div class="ndqylfb">
+                    <p class="title">年度签约量分布</p>
+                    <div id="ndqylfb"></div>
+                </div>
+                <div class="ggzcxx">
+                    <p class="title">公告政策信息</p>
+                    <div id="ggzcxx">
+                        <ul>
+                            <li v-for="(item, index) in infos">
+                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
+                                <span class="times">{{ item.time }}</span>
+                                <span class="info">{{ item.info }}</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+    const clientWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920; //尺寸大小
+    return size * fontSize;
+}
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+    data() {
+        return {
+            res: "日",
+            type: "电",
+            option: {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
+                    borderColor: 'rgba(75, 253, 238, 0.4)',
+                    textStyle: {
+                        color: '#CFE3FC',
+                    },
+                    borderWidth: 1,
+                },
+                grid: {
+                    top: '15%',
+                    right: '5%',
+                    left: "8%",
+                    bottom: '12%'
+                },
+                xAxis: [{
+                    name: "",
+                    type: 'category',
+                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: '#e2e9ff',
+                        textStyle: {
+                            fontSize: 12
+                        },
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                }],
+                yAxis: [{
+                    name: "单位：MWh",
+                    axisLabel: {
+                        formatter: '{value}',
+                        color: '#e2e9ff',
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#FFFFFF'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255,255,255,0.12)'
+                        }
+                    }
+                }],
+                series: [{
+                    type: 'bar',
+                    data: [760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300, 400],
+                    barWidth: '30%',
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
+                            }], false),
+                            shadowColor: 'rgba(0,160,221,1)',
+                            shadowBlur: 4,
+                        }
+                    },
+                    label: {
+                        normal: {
+                            show: true,
+                            lineHeight: 10,
+                            formatter: '{c}',
+                            position: 'top',
+                            textStyle: {
+                                color: '#00D6F9',
+                                fontSize: 12
+                            }
+
+                        }
+                    }
+                }]
+            },
+            infos: [
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+                {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                }, {
+                    time: "2021-10-02  11:13:52",
+                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
+                },
+            ],
+            lists: [
+                {
+                    title: "年度销售指标完成率",
+                    money: "7,965",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "80",
+                },
+                {
+                    title: "年度收益金额",
+                    money: "5,665",
+                    tb: "12.23",
+                    hb: "27.16",
+                    percent: "40",
+                }
+            ],
+            pclist: [
+                {
+                    name: "月度偏差电量",
+                    count: "5514",
+                    danwei: "MWh",
+                    hb: "27.16"
+                },
+                {
+                    name: "月度偏差率",
+                    count: "25",
+                    danwei: "%",
+                    hb: "27.16"
+                },
+            ]
+        };
+    },
+    methods: {
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom, null, {
+                devicePixelRatio: 10, // 设置为2或更高的值
+            });
+            myChart.setOption(option);
+            window.addEventListener("resize", function () {
+                myChart.resize();
+            });
+        },
+        qyyh() {
+            let option = {
+                // backgroundColor: '#081736',
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        lineStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(0, 255, 233,0)'
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(255, 255, 255,1)'
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0, 255, 233,0)'
+                                    }
+                                ],
+                                global: false
+                            }
+                        }
+                    }
+                },
+
+                grid: {
+                    top: '12%',
+                    left: '10%',
+                    right: '10%',
+                    bottom: '25%'
+                    // containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#009dff'
+                            }
+                        },
+
+                        axisLabel: {
+                            color: '#fff',
+                            width: 100
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#00BFF3',
+                                opacity: 0.23
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        boundaryGap: false,
+                        data: [
+                            "01",
+                            "02",
+                            "03",
+                            "04",
+                            "05",
+                            "06",
+                            "07",
+                            "08",
+                            "09",
+                            "10",
+                            "11",
+                            "12",
+                        ] //this.$moment(data.times).format("HH-mm") ,
+                    }
+                ],
+
+                yAxis: [
+                    {
+                        type: 'value',
+                        min: 0,
+                        // max: 140,
+                        splitNumber: 4,
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#00BFF3',
+                                opacity: 0.23
+                            }
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#009dff'
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            margin: 20,
+                            textStyle: {
+                                color: '#fff'
+                            }
+                        },
+                        axisTick: {
+                            show: false
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '',
+                        type: 'line',
+                        smooth: true,
+                        showAllSymbol: true,
+                        // symbol: 'circle',
+                        symbolSize: 2,
+                        lineStyle: {
+                            normal: {
+                                color: '#2CABE3'
+                            }
+                        },
+                        itemStyle: {
+                            color: '#2CABE3',
+                            borderColor: '#2CABE3',
+                            borderWidth: 2
+                        },
+                        data: [
+                            4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3,
+                            5, 8
+                        ] //data.values
+                    },
+                    {
+                        name: '',
+                        type: 'line',
+                        smooth: true,
+                        showAllSymbol: true,
+                        // symbol: 'circle',
+                        symbolSize: 2,
+                        lineStyle: {
+                            normal: {
+                                color: '#7def86'
+                            }
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#7def86',
+                                borderColor: 'rgba(0, 255, 240, 1)',
+                                lineStyle: {
+                                    color: 'rgba(0, 255, 240, 1)'
+                                }
+                            }
+                        },
+                        data: [
+                            3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1,
+                            7, 6
+                        ] //data.values
+                    }
+                ]
+            };
+            this.defineEcharts("qyyh", option)
+        },
+        // 年度售电量
+        ndsdl() {
+            // 假数据
+            let left1 = {
+                code: 200,
+                msg: "人数趋势图获取成功",
+                data: {
+                    count: [
+                        153456,
+                        143456,
+                        163456,
+                        183456,
+                        163456,
+                        153456,
+                        163456,
+                        133456,
+                        163456,
+                        143456,
+                        103456,
+                        113456,
+                        153456,
+                        133456,
+                        143456
+                    ],
+                    time: [
+                        "01",
+                        "02",
+                        "03",
+                        "04",
+                        "05",
+                        "06",
+                        "07",
+                        "08",
+                        "09",
+                        "10",
+                        "11",
+                        "12"
+                    ]
+                }
+            };
+            //计算最大值
+            function maxNumCount(num) {
+                let maxNum = "";
+                //将数字转化为数组
+                let max = num.toString().split("");
+                for (var i = 0; i < max.length; i++) {
+                    if (i > 1) {
+                        maxNum += "0";
+                    }
+                }
+                //组装补0
+                if (maxNum.length > 1) {
+                    if (max[1] == "9") {
+                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+                    } else {
+                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+                    }
+                } else {
+                    maxNum = "100";
+                }
+                return maxNum;
+            }
+            //计算最小值
+            function minNumCount(num) {
+                if (num < 10000) {
+                    return "0";
+                }
+                let minNum = "";
+                //将数字转化为数组
+                let min = num.toString().split("");
+                for (var i = 0; i < min.length; i++) {
+                    //组装补0
+                    if (i > 1) {
+                        minNum += "0";
+                    }
+                }
+                if (min[1] == "0") {
+                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
+                } else {
+                    minNum = min[0] + parseInt(min[1]) + minNum;
+                }
+
+                return minNum;
+            }
+
+            let maxNum = Math.max(...left1.data.count);
+            let minNum = Math.min(...left1.data.count);
+            maxNum = maxNumCount(maxNum);
+            minNum = minNumCount(minNum);
+            let yName = "人数（万）";
+            if (maxNum > 9999999) {
+                yName = "人数（千万）";
+            }
+            var option;
+
+            option = {
+                grid: {
+                    width: "84%",
+                    height: "75%",
+                    top: "20%", //生成的图片和顶部的间距
+                    left: "5%",
+                    bottom: "0%",
+                    right: "16%",
+                    containLabel: true //为ture才会生效
+                },
+                tooltip: {
+                    trigger: "axis"
+                    //   axisPointer: {
+                    //     type: "shadow",
+                    //   },
+                },
+                xAxis: {
+                    // name: "日期",
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    type: "category",
+                    boundaryGap: false,
+                    data: left1.data.time,
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        margin: 10
+                        // interval: 0, //使x轴上的文字显示完全,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    type: "value",
+                    name: yName,
+                    nameTextStyle: {
+                        color: "#03CECF",
+                        fontSize: 14
+                    },
+                    min: minNum,
+                    max: maxNum,
+                    axisLine: {
+                        lineStyle: {
+                            color: "rgb(37,52,82)"
+                        },
+                        show: true
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(37,52,82)"
+                        }
+                    },
+                    axisLabel: {
+                        color: "#03CECF",
+                        fontSize: 14,
+                        interval: 20,
+                        formatter: function (value, index) {
+                            if (yName.indexOf("千万") && maxNum > 10000000) {
+                                value = (value / 10000000).toFixed(2);
+                            } else if (maxNum > 10000 && maxNum < 10000000) {
+                                value = value / 10000;
+                            }
+                            return value;
+                        }
+                    }
+                },
+                splitLine: {
+                    show: false
+                },
+                series: [
+                    {
+                        data: left1.data.count,
+                        type: "line",
+                        showSymbol: true,
+                        itemStyle: {
+                            emphasis: {
+                                color: "rgb(7,162,148)",
+                                borderColor: "rgba(7,162,148,0.6)",
+                                borderWidth: 20
+                            },
+                            normal: {
+                                color: "rgb(62,195,221)",
+                                borderColor: "rgb(6,65,95)",
+                                lineStyle: {
+                                    color: "rgb(101,184,196)"
+                                }
+                            }
+                        },
+                        areaStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#68e3e5"
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "rgba(24, 68, 121,0)"
+                                        }
+                                    ],
+                                    false
+                                )
+                            }
+                        }
+                    }
+                ]
+            };
+        },
+        //偏差分析
+        pcfx() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
+            }
+            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位MWh",
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
+            }, {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: true,
+                min: -20,
+                max: 30,
+                axisLabel: {
+                    formatter: "{value}" + "%",
+                    textStyle: { fontSize: 12, color: '#fff' }
+                }
+            }]
+
+            // series
+            const series = [
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '电费',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
+                        }
+                    },
+                },
+                {
+                    z: 2,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 9,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced2,
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0, x2: 1, y: 0, y2: 0,
+                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
+                        }
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '销售电价', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [6, 6],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    data: dataArr.rateData2
+                }]
+            let option = { xAxis, yAxis, series, grid }
+            this.defineEcharts("pcfxb", option);
+        },
+        yhhyzb() {
+            var trafficWay = [{
+                name: '钢铁',
+                value: 280
+            }, {
+                name: '水泥',
+                value: 280
+            }, {
+                name: '化工',
+                value: 280
+            }, {
+                name: '制造',
+                value: 280
+            }, {
+                name: '其他',
+                value: 280
+            }];
+            var data = [];
+            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                center: ["36%", '50%'],
+                radius: [105, 109],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: false,
+                        },
+                        labelLine: {
+                            show: false,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                color: color,
+                title: {
+                    text: '28%',
+                    subtext: "钢铁",
+                    top: '48%',
+                    textAlign: "center",
+                    left: "35%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    },
+                    subtextStyle: {
+                        fontFamily: "微软雅黑",
+                        fontSize: 16,
+                        color: '#fff',
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [{
+                        name: '钢铁',
+                        value: 280
+                    }, {
+                        name: '水泥',
+                        value: 280
+                    }, {
+                        name: '化工',
+                        value: 280
+                    }, {
+                        name: '制造',
+                        value: 280
+                    }, {
+                        name: '其他',
+                        value: 280
+                    }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 320,
+                    bottom: 145,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 16,
+                                color: "#fff",
+                            },
+                            num: {
+                                fontSize: 12,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            this.defineEcharts("yhhyzb", option)
+        },
+    },
+    mounted() {
+        this.defineEcharts("ndqylfb", this.option);
+        // this.defineEcharts("ynl", this.option1);
+        this.qyyh();
+        this.pcfx();
+        this.yhhyzb();
+        var data = [
+            {
+                name: "南京市",
+                value: 1,
+            },
+            {
+                name: "济南市",
+                value: 2,
+            },
+            {
+                name: "徐州市",
+                value: 3,
+            },
+            {
+                name: "常州市",
+                value: 4,
+            },
+            {
+                name: "苏州市",
+                value: 5,
+            },
+            {
+                name: "南通市",
+                value: 6,
+            },
+            {
+                name: "连云港市",
+                value: 7,
+            },
+            {
+                name: "淮安市",
+                value: 8,
+            },
+            {
+                name: "盐城市",
+                value: 9,
+            },
+            {
+                name: "扬州市",
+                value: 10,
+            },
+            {
+                name: "镇江市",
+                value: 11,
+            },
+            {
+                name: "泰州市",
+                value: 12,
+            },
+            {
+                name: "宿迁市",
+                value: 13,
+            },
+        ];
+        var splitList = [
+            {
+                start: 1,
+                end: 1,
+                label: "济南市",
+                color: "#236da8",
+            },
+            {
+                start: 2,
+                end: 2,
+                label: "无锡市",
+                color: "#2884db",
+            },
+            {
+                start: 3,
+                end: 3,
+                label: "徐州市",
+                color: "#244779",
+            },
+            {
+                start: 4,
+                end: 4,
+                label: "常州市",
+                color: "#246198",
+            },
+            {
+                start: 5,
+                end: 5,
+                label: "苏州市",
+                color: "#2884db",
+            },
+            {
+                start: 6,
+                end: 6,
+                label: "南通市",
+                color: "#2884db",
+            },
+            {
+                start: 7,
+                end: 7,
+                label: "连云港市",
+                color: "#244779",
+            },
+            {
+                start: 8,
+                end: 8,
+                label: "淮安市",
+                color: "#244779",
+            },
+            {
+                start: 9,
+                end: 9,
+                label: "盐城市",
+                color: "#244779",
+            },
+            {
+                start: 10,
+                end: 10,
+                label: "扬州市",
+                color: "#246198",
+            },
+            {
+                start: 11,
+                end: 11,
+                label: "镇江市",
+                color: "#2884db",
+            },
+            {
+                start: 12,
+                end: 12,
+                label: "泰州市",
+                color: "#2884db",
+            },
+            {
+                start: 13,
+                end: 13,
+                label: "宿迁市",
+                color: "#244779",
+            },
+        ];
+        var chartDom = document.getElementById("map");
+        var myChart = this.$echarts.init(chartDom, null, {
+            devicePixelRatio: 10, // 设置为2或更高的值
+        });
+
+        //获取山东地图数据。
+        $.get(
+            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+            function (geojson) {
+                echarts.registerMap("山东", geojson);
+                let option = {
+                    series: [
+                        {
+                            tooltip: {
+                                trigger: "item",
+                            },
+                            name: "山东",
+                            type: "map3D",
+                            map: "山东",
+                            boxDepth: 60, //地图倾斜度
+                            regionHeight: 6, //地图厚度
+                            label: {
+                                show: true, //是否显示市
+                                textStyle: {
+                                    color: "#fff", //文字颜色
+                                    fontSize: 12, //文字大小
+                                    fontFamily: "微软雅黑",
+                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                                },
+                            },
+                            itemStyle: {
+                                opacity: 1, // 透明度
+                                borderWidth: 1.5, //分界线宽度
+                                borderColor: "#0699E4", //分界线颜色
+                            },
+                            groundplane: {
+                                show: true,
+                            },
+                            data: data,
+                            //shading: 'realistic',
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#093099", // 纹理贴图
+                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 1, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 80, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        },
+                    ],
+                    dataRange: {
+                        show: false,
+                        splitList: splitList,
+                    },
+                    animation: true,
+                };
+                myChart.setOption(option);
+                myChart.on("click", this.chartClick);
+                let chartClick = function (param) {
+                    console.log(param);
+                    myChart.setOption(option, false);
+                    window.addEventListener("resize", function () {
+                        myChart.resize();
+                    });
+                    var selectedPro = param.name;
+                    if (!cityProper[selectedPro]) {
+                        option.series.splice(1);
+                        option.legend = null;
+                        option.visualMap = null;
+                        myChart.setOption(option, true);
+                        return;
+                    }
+                    //获取点击区域数据
+                    $.get(cityProper[selectedPro], function (geojson) {
+                        echarts.registerMap(selectedPro, geojson);
+                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+                        option.series[0] = {
+                            name: "",
+                            type: "map",
+                            map: selectedPro,
+                            boxDepth: 80, //地图倾斜度
+                            regionHeight: 5, //地图厚度
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                                emphasis: {
+                                    label: {
+                                        show: true,
+                                    },
+                                },
+                            },
+                            groundplane: {
+                                show: false,
+                            },
+                            data: data,
+                            shading: "realistic",
+                            // 真实感材质相关配置 shading: 'realistic'时有效
+                            realisticMaterial: {
+                                detailTexture: "#fff", // 纹理贴图
+                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                                metalness: 0, // 0材质是非金属 ，1金属
+                                roughnessAdjust: 0,
+                            },
+                            viewControl: {
+                                distance: 100, // 地图视角 控制初始大小
+                                rotateSensitivity: 1, // 旋转
+                                zoomSensitivity: 1, // 缩放
+                            },
+                        };
+                        myChart.setOption(option);
+                    });
+                };
+            }
+        );
+    },
+    beforeDestroy() {
+        //离开页面后，删除屏幕监听，防止监听事件一直存在
+        window.removeEventListener("resize", this.getResize);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+
+    .title {
+        width: 100%;
+        height: 76px;
+        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        p {
+            width: 527px;
+            height: 47px;
+            font-size: 44px;
+            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+            font-weight: 600;
+            line-height: 47px;
+            letter-spacing: 3px;
+            color: #fff;
+            margin-left: -60px;
+        }
+
+        img:nth-of-type(1) {
+            width: 231px;
+            height: 59px;
+        }
+
+        img:nth-of-type(2) {
+            width: 158px;
+            height: 28px;
+        }
+    }
+
+    .containter {
+        width: 100%;
+        height: 967px;
+        display: flex;
+        position: relative;
+        justify-content: space-between;
+
+        .left {
+            width: 436px;
+            height: 100%;
+
+            .ndqyyh {
+                // height: 27.22vh;
+                height: 294px;
+                //   width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            width: 14px;
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                width: 28px;
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #qyyh {
+                    width: 100%;
+                    height: 180px;
+                    margin-top: 100px;
+                }
+            }
+
+            .ndsdl {
+                height: 315px;
+                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+                background-size: cover;
+                margin-top: 6px;
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                .bg_title {
+                    width: 394px;
+                    height: 62px;
+                    background: url(../assets/zhsdy/组\ 3187.png);
+                    background-size: cover;
+                    position: absolute;
+                    top: 40px;
+                    display: flex;
+                    justify-content: space-around;
+
+                    .tit_first {
+                        width: 116px;
+                        height: 44px;
+                        font-size: 32px;
+                        font-weight: 700;
+                        color: #14ADFD;
+                        line-height: 44px;
+                        display: flex;
+
+                        .tit_danwei {
+                            width: 14px;
+                            height: 44px;
+                            font-size: 14px;
+                            font-weight: 400;
+                            color: #FFFFFF;
+                            line-height: 44px;
+                        }
+                    }
+
+                    .tit_second {
+                        width: 132px;
+                        display: flex;
+                        justify-content: space-between;
+
+                        div {
+                            p:nth-child(1) {
+                                width: 28px;
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 30px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 30px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 4x;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                #ndsdl {
+                    position: absolute;
+                    width: 100%;
+                    height: 200px;
+                    bottom: 10px;
+                }
+            }
+
+        }
+
+        .right {
+            width: 436px;
+            height: 100%;
+
+            .ndsdje {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #ndsdje {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 50px;
+
+                    .infos {
+                        width: 396px;
+                        height: 104px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url(../assets/zhsdy/组\ 3168.png);
+                        background-size: cover;
+                        margin: 0 auto;
+                        margin-bottom: 15px;
+
+                        .first {
+                            width: 180px;
+
+                            p:nth-child(1) {
+                                width: 180px;
+                                height: 44px;
+                                display: flex;
+                                justify-content: space-between;
+
+                                img {
+                                    width: 15px;
+                                    height: 15px;
+                                    border: none;
+                                    display: block;
+                                    margin-top: 10px;
+                                    margin-left: 10px;
+                                }
+
+                                span.titles {
+                                    width: 140px;
+                                    height: 44px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 44px;
+                                    display: block;
+                                }
+                            }
+
+                            p.money {
+                                width: 145px;
+                                height: 44px;
+                                font-size: 40px;
+                                font-weight: 700;
+                                color: #52C2FF;
+                                line-height: 44px;
+
+                                .danwei {
+                                    color: #fff;
+                                    font-size: 14px;
+                                }
+                            }
+                        }
+
+                        .second {
+                            width: 172px;
+                            height: 100%;
+
+                            div.s_tit {
+                                width: 172px;
+                                display: flex;
+                                justify-content: space-around;
+
+                                p:nth-child(1) {
+                                    width: 28px;
+                                    height: 36px;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    color: #FFFFFF;
+                                    line-height: 36px;
+                                }
+
+                                p.tb_percent {
+                                    width: 57px;
+                                    height: 30px;
+                                    font-size: 16px;
+                                    font-weight: 700;
+                                    color: #F2B810;
+                                    line-height: 30px;
+                                    display: flex;
+
+                                    img {
+                                        width: 12px;
+                                        height: 12px;
+                                        margin-top: 8px;
+                                    }
+                                }
+                            }
+
+                            .bigBox {
+                                width: 172px;
+                                height: 10px;
+                                background-color: #273546;
+                                border-radius: 67px 67px 67px 67px;
+                                margin-top: 5px;
+
+                                .smallBox {
+                                    width: 100px;
+                                    height: 10px;
+                                    border-radius: 67px 67px 67px 67px;
+                                    background: linear-gradient(to right,
+                                            rgba(38, 206, 253, 1) 20%,
+                                            rgba(42, 254, 255, 1) 100%,
+                                            rgba(38, 206, 253, 1) 20%);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            .pcfx {
+                height: 294px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #pcfx {
+                    width: 100%;
+                    height: 100%;
+                    padding-top: 40px;
+
+                    .pc_tit {
+                        width: 398px;
+                        height: 48px;
+                        margin: 0 auto;
+                        background: url(../assets/zhsdy/组\ 3169.png);
+                        background-size: cover;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 5px;
+
+                        .pc_l {
+                            width: 272px;
+                            height: 48px;
+                            display: flex;
+                            justify-content: flex-start;
+
+                            .pc_name {
+                                margin-left: 18px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            img {
+                                width: 15px;
+                                height: 15px;
+                                margin-top: 18px;
+                                margin-left: 10px;
+                            }
+
+                            .pc_count {
+                                margin-left: 14px;
+                                height: 44px;
+                                font-size: 24px;
+                                font-weight: 700;
+                                color: #0AA7FF;
+                                line-height: 44px;
+                                display: block;
+                            }
+
+                            .pc_danwei {
+                                margin-left: 6px;
+                                width: 33px;
+                                height: 44px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 44px;
+                            }
+                        }
+
+                        .pc_r {
+                            margin-right: 20px;
+
+                            p:nth-child(1) {
+                                width: 28px;
+                                height: 24px;
+                                font-size: 14px;
+                                font-weight: 400;
+                                color: #FFFFFF;
+                                line-height: 24px;
+                            }
+
+                            p.tb_percent {
+                                width: 57px;
+                                height: 24px;
+                                font-size: 16px;
+                                font-weight: 700;
+                                color: #F2B810;
+                                line-height: 24px;
+                                display: flex;
+
+                                img {
+                                    width: 12px;
+                                    height: 12px;
+                                    margin-top: 8px;
+                                }
+                            }
+                        }
+                    }
+
+                    #pcfxb {
+                        width: 100%;
+                        height: 150px;
+                    }
+                }
+            }
+
+            .yhhyzb {
+                height: 353px;
+                width: 100%;
+                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+                background-size: cover;
+                position: relative;
+                margin-top: 6px;
+
+                .title {
+                    position: absolute;
+                    left: 160px;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                }
+
+                #yhhyzb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .footer {
+            position: absolute;
+            width: 1445px;
+            height: 325px;
+            bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+
+            .ndqylfb {
+                width: 776px;
+                height: 100%;
+                background: url(../assets/zhsdy/用能量-框.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    transform: translateX(-50%);
+                    line-height: 36px;
+                }
+
+                #ndqylfb {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .ggzcxx {
+                width: 653px;
+                height: 325px;
+                background: url(../assets/zhsdy/组\ 3120.png);
+                background-size: cover;
+                position: relative;
+
+                .title {
+                    position: absolute;
+                    left: 50%;
+                    width: 144px;
+                    height: 36px;
+                    font-size: 18px;
+                    font-family: "Source Han Sans";
+                    font-weight: 700;
+                    color: rgba(255, 255, 255, 0.87);
+                    line-height: 36px;
+                    transform: translateX(-50%);
+                }
+
+                #ggzcxx {
+                    width: 100%;
+                    margin-top: 60px;
+
+                    ul {
+                        width: 100%;
+
+
+                        li {
+                            width: 100%;
+                            height: 40px;
+                            padding: 0px 36px 0px 18px;
+                            box-sizing: border-box;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                            .img {
+                                width: 12px;
+                                height: 12px;
+                                display: block;
+                            }
+
+                            .times {
+                                width: 145px;
+                                height: 36px;
+                                color: #52C2FF;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+
+                            .info {
+                                width: 381px;
+                                height: 36px;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
+                                font-size: 14px;
+                                line-height: 36px;
+                                display: block;
+                            }
+                        }
+
+                        li:nth-child(2n+2) {
+                            background: #0E2C7E;
+                        }
+                    }
+                }
+            }
+        }
+
+        #map {
+            width: 994px;
+            position: absolute;
+            height: 627px;
+            left: 50%;
+            transform: translateX(-50%);
+            overflow: hidden;
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/ZHDY_20231201161356.vue b/.history/src/views/ZHDY_20231201161356.vue
new file mode 100644
index 0000000..d8e461d
--- /dev/null
+++ b/.history/src/views/ZHDY_20231201161356.vue
@@ -0,0 +1,2016 @@
+<template>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
+    </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">年度签约用户</p>
+          <div class="bg_title">
+            <p class="tit_first">2451<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>同比</p>
+                <p class="tb_percent">
+                  12.23%
+                  <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                </p>
+              </div>
+              <div>
+                <p>环比</p>
+                <p class="tb_percent">
+                  27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
+            <div class="tit_second">
+              <div>
+                <p>同比</p>
+                <p class="tb_percent">
+                  12.23%
+                  <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                </p>
+              </div>
+              <div>
+                <p>环比</p>
+                <p class="tb_percent">
+                  27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">年度签约量分布</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">公告政策信息</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const fontSizeRem = (size) => {
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
+import * as echarts from "echarts";
+// import { fontSizeRem } from "../assets/function";
+export default {
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "12%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：MWh",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [
+              760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300,
+              400,
+            ],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#00D6F9",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "年度销售指标完成率",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    qyyh() {
+      let option = {
+        // backgroundColor: '#081736',
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 255, 233,0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(255, 255, 255,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 255, 233,0)",
+                  },
+                ],
+                global: false,
+              },
+            },
+          },
+        },
+
+        grid: {
+          top: "12%",
+          left: "10%",
+          right: "10%",
+          bottom: "25%",
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#009dff",
+              },
+            },
+
+            axisLabel: {
+              color: "#fff",
+              width: 100,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#00BFF3",
+                opacity: 0.23,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            boundaryGap: false,
+            data: [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+            ], //this.$moment(data.times).format("HH-mm") ,
+          },
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            // max: 140,
+            splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#00BFF3",
+                opacity: 0.23,
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#009dff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              margin: 20,
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            // symbol: 'circle',
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#2CABE3",
+              },
+            },
+            itemStyle: {
+              color: "#2CABE3",
+              borderColor: "#2CABE3",
+              borderWidth: 2,
+            },
+            data: [
+              4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5,
+              4, 3, 5, 8,
+            ], //data.values
+          },
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            // symbol: 'circle',
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#7def86",
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#7def86",
+                borderColor: "rgba(0, 255, 240, 1)",
+                lineStyle: {
+                  color: "rgba(0, 255, 240, 1)",
+                },
+              },
+            },
+            data: [
+              3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4,
+              2, 1, 7, 6,
+            ], //data.values
+          },
+        ],
+      };
+      this.defineEcharts("qyyh", option);
+    },
+    // 年度售电量
+    ndsdl() {
+      // 假数据
+      let left1 = {
+        code: 200,
+        msg: "人数趋势图获取成功",
+        data: {
+          count: [
+            153456, 143456, 163456, 183456, 163456, 153456, 163456, 133456,
+            163456, 143456, 103456, 113456, 153456, 133456, 143456,
+          ],
+          time: [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+          ],
+        },
+      };
+      //计算最大值
+      function maxNumCount(num) {
+        let maxNum = "";
+        //将数字转化为数组
+        let max = num.toString().split("");
+        for (var i = 0; i < max.length; i++) {
+          if (i > 1) {
+            maxNum += "0";
+          }
+        }
+        //组装补0
+        if (maxNum.length > 1) {
+          if (max[1] == "9") {
+            maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+          } else {
+            maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+          }
+        } else {
+          maxNum = "100";
+        }
+        return maxNum;
+      }
+      //计算最小值
+      function minNumCount(num) {
+        if (num < 10000) {
+          return "0";
+        }
+        let minNum = "";
+        //将数字转化为数组
+        let min = num.toString().split("");
+        for (var i = 0; i < min.length; i++) {
+          //组装补0
+          if (i > 1) {
+            minNum += "0";
+          }
+        }
+        if (min[1] == "0") {
+          minNum = parseInt(min[0]) - 1 + "9" + minNum;
+        } else {
+          minNum = min[0] + parseInt(min[1]) + minNum;
+        }
+
+        return minNum;
+      }
+
+      let maxNum = Math.max(...left1.data.count);
+      let minNum = Math.min(...left1.data.count);
+      maxNum = maxNumCount(maxNum);
+      minNum = minNumCount(minNum);
+      let yName = "人数（万）";
+      if (maxNum > 9999999) {
+        yName = "人数（千万）";
+      }
+      var option;
+
+      option = {
+        grid: {
+          width: "84%",
+          height: "75%",
+          top: "20%", //生成的图片和顶部的间距
+          left: "5%",
+          bottom: "0%",
+          right: "16%",
+          containLabel: true, //为ture才会生效
+        },
+        tooltip: {
+          trigger: "axis",
+          //   axisPointer: {
+          //     type: "shadow",
+          //   },
+        },
+        xAxis: {
+          // name: "日期",
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          type: "category",
+          boundaryGap: false,
+          data: left1.data.time,
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            margin: 10,
+            // interval: 0, //使x轴上的文字显示完全,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: yName,
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          min: minNum,
+          max: maxNum,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(37,52,82)",
+            },
+          },
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            interval: 20,
+            formatter: function (value, index) {
+              if (yName.indexOf("千万") && maxNum > 10000000) {
+                value = (value / 10000000).toFixed(2);
+              } else if (maxNum > 10000 && maxNum < 10000000) {
+                value = value / 10000;
+              }
+              return value;
+            },
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        series: [
+          {
+            data: left1.data.count,
+            type: "line",
+            showSymbol: true,
+            itemStyle: {
+              emphasis: {
+                color: "rgb(7,162,148)",
+                borderColor: "rgba(7,162,148,0.6)",
+                borderWidth: 20,
+              },
+              normal: {
+                color: "rgb(62,195,221)",
+                borderColor: "rgb(6,65,95)",
+                lineStyle: {
+                  color: "rgb(101,184,196)",
+                },
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#68e3e5",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(24, 68, 121,0)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+          },
+        ],
+      };
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option);
+    // this.defineEcharts("ynl", this.option1);
+    this.qyyh();
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
+    width: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
+    }
+
+    img:nth-of-type(1) {
+      width: 231px;
+      height: 59px;
+    }
+
+    img:nth-of-type(2) {
+      width: 158px;
+      height: 28px;
+    }
+  }
+
+  .containter {
+    width: 100%;
+    height: 967px;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+
+    .left {
+      width: 436px;
+      height: 100%;
+
+      .ndqyyh {
+        // height: 27.22vh;
+        height: 294px;
+        //   width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
+        }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  width: 28px;
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  width: 57px;
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                width: 33px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
+}
+</style>
diff --git a/src/views/XQXY.vue b/src/views/XQXY.vue
index 4ab7ead..1a9ee59 100644
--- a/src/views/XQXY.vue
+++ b/src/views/XQXY.vue
@@ -1,1980 +1,1977 @@
 <template>
-    <div class="box">
-        <div class="title">
-            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
-            <p>山东需求响应工作开展情况</p>
-            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
-        </div>
-        <div class="containter">
-            <div class="left">
-                <div class="ndqyyh">
-                    <p class="title">省综代理用户情况</p>
-                    <div class="bg_title">
-                        <p class="tit_first">2356<span class="tit_danwei">户</span></p>
-                        <div class="tit_second">
-                            <div>
-                                <p>工业户数</p>
-                                <p class="tb_percent">324<span style="color: #fff;">户</span></p>
-                            </div>
-                            <div>
-                                <p>楼宇户数</p>
-                                <p class="tb_percent">452<span style="color: #fff;">户</span></p>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="qyyh"></div>
-                </div>
-                <div class="ndsdl">
-                    <p class="title">年度售电量</p>
-                    <div class="bg_title">
-                        <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
-                        <div class="tit_second">
-                            <div>
-                                <p>削锋量</p>
-                                <p class="tb_percent">78.2<span style="color: #fff;">万KW</span></p>
-                            </div>
-                            <div>
-                                <p>填谷量</p>
-                                <p class="tb_percent">30.2<span style="color: #fff;">万KW</span></p>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="ndsdl"></div>
-                </div>
-            </div>
-            <div class="right">
-                <div class="ndsdje">
-                    <p class="title">年度售电金额</p>
-                    <div id="ndsdje">
-                        <div class="infos" v-for="(item, index) in lists" :key="index">
-                            <div class="first">
-                                <p>
-                                    <img src="../assets/zhsdy/组 3189.png" alt="">
-                                    <span class="titles">{{ item.title }}</span>
-                                </p>
-                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
-                            </div>
-                            <div class="second">
-                                <div class="s_tit">
-                                    <div>
-                                        <p>同比</p>
-                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
-                                                alt=""></p>
-                                    </div>
-                                    <div>
-                                        <p>环比</p>
-                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
-                                                alt="">
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="bigBox">
-                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="pcfx">
-                    <p class="title">偏差分析</p>
-                    <div id="pcfx">
-                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
-                            <div class="pc_l">
-                                <img src="../assets/zhsdy/组 3192.png" alt="">
-                                <span class="pc_name">{{ item.name }}</span>
-                                <span class="pc_count">{{ item.count }}</span>
-                                <span class="pc_danwei">{{ item.danwei }}</span>
-                            </div>
-                            <div class="pc_r">
-                                <p>环比</p>
-                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
-                            </div>
-                        </div>
-                        <div id="pcfxb"></div>
-                    </div>
-                </div>
-                <div class="yhhyzb">
-                    <p class="title">用户行业占比</p>
-                    <div id="yhhyzb"></div>
-                </div>
-            </div>
-            <div id="map"></div>
-            <div class="footer">
-                <div class="ndqylfb">
-                    <p class="title">用户资源分布情况</p>
-                    <div id="ndqylfb"></div>
-                </div>
-                <div class="ggzcxx">
-                    <p class="title">山东需求侧响应动态热点</p>
-                    <div id="ggzcxx">
-                        <ul>
-                            <li v-for="(item, index) in infos">
-                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
-                                <span class="times">{{ item.time }}</span>
-                                <span class="info">{{ item.info }}</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>山东需求响应工作开展情况</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
     </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">省综代理用户情况</p>
+          <div class="bg_title">
+            <p class="tit_first">2356<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>工业户数</p>
+                <p class="tb_percent">324<span style="color: #fff">户</span></p>
+              </div>
+              <div>
+                <p>楼宇户数</p>
+                <p class="tb_percent">452<span style="color: #fff">户</span></p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">520<span class="tit_danwei">万KW</span></p>
+            <div class="tit_second">
+              <div>
+                <p>削锋量</p>
+                <p class="tb_percent">
+                  78.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+              <div>
+                <p>填谷量</p>
+                <p class="tb_percent">
+                  30.2<span style="color: #fff">万KW</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">需求响应补贴收益</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>工业占比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>楼宇占比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+            <div class="infos" v-for="(item, index) in lists2" :key="index">
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="first">
+                <p>
+                  <span class="titles">{{ item.title2 }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money2 }}<span class="danwei">万元</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>响应成功率</p>
+                <p class="tb_percent">{{ item.hb }}%</p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">响应资源占比分析</p>
+          <div id="yhhyzb">
+            <div class="xyzy1">
+              <p>用户类型占比</p>
+              <div id="gongye"></div>
+            </div>
+            <div class="xyzy2">
+              <p>响应类型占比</p>
+              <div id="xuefeng"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">用户资源分布情况</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">山东需求侧响应动态热点</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 const fontSizeRem = (size) => {
-    const clientWidth =
-        window.innerWidth ||
-        document.documentElement.clientWidth ||
-        document.body.clientWidth;
-    if (!clientWidth) return;
-    let fontSize = clientWidth / 1920; //尺寸大小
-    return size * fontSize;
-}
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
 import * as echarts from "echarts";
 // import { fontSizeRem } from "../assets/function";
 export default {
-    data() {
-        return {
-            res: "日",
-            type: "电",
-            option1: {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
-                    borderColor: 'rgba(75, 253, 238, 0.4)',
-                    textStyle: {
-                        color: '#CFE3FC',
-                    },
-                    borderWidth: 1,
-                },
-                grid: {
-                    top: '15%',
-                    right: '5%',
-                    left: "8%",
-                    bottom: '13%'
-                },
-                xAxis: [{
-                    name: "",
-                    type: 'category',
-                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
-                    axisLine: {
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    axisLabel: {
-                        margin: 10,
-                        color: '#e2e9ff',
-                        textStyle: {
-                            fontSize: 12
-                        },
-                    },
-                    axisTick: {
-                        show: false
-                    }
-                }],
-                yAxis: [{
-                    name: "单位：户",
-                    axisLabel: {
-                        formatter: '{value}',
-                        color: '#e2e9ff',
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,0.12)'
-                        }
-                    }
-                }],
-                series: [{
-                    type: 'bar',
-                    data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
-                    barWidth: '30%',
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
-                            }, {
-                                offset: 1,
-                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
-                            }], false),
-                            shadowColor: 'rgba(0,160,221,1)',
-                            shadowBlur: 4,
-                            barBorderRadius: [50, 50, 50, 50]
-                        }
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            lineHeight: 10,
-                            formatter: '{c}',
-                            position: 'top',
-                            textStyle: {
-                                color: '#fff',
-                                fontSize: 12
-                            }
-
-                        }
-                    }
-                }]
-            },
-            option2: {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
-                    borderColor: 'rgba(75, 253, 238, 0.4)',
-                    textStyle: {
-                        color: '#CFE3FC',
-                    },
-                    borderWidth: 1,
-                },
-                grid: {
-                    top: '15%',
-                    right: '5%',
-                    left: "8%",
-                    bottom: '13%'
-                },
-                xAxis: [{
-                    name: "",
-                    type: 'category',
-                    data: ["2019", "2020", "2021"],
-                    axisLine: {
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    axisLabel: {
-                        margin: 10,
-                        color: '#e2e9ff',
-                        textStyle: {
-                            fontSize: 12
-                        },
-                    },
-                    axisTick: {
-                        show: false
-                    }
-                }],
-                yAxis: [{
-                    name: "单位：户",
-                    axisLabel: {
-                        formatter: '{value}',
-                        color: '#e2e9ff',
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,0.12)'
-                        }
-                    }
-                }],
-                series: [
-                    {
-                        type: 'bar',
-                        data: [24, 30, 12],
-                        barWidth: 9,
-                        barGap: 2,
-                        itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                    offset: 0,
-                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
-                                }, {
-                                    offset: 1,
-                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
-                                }], false),
-                                shadowColor: 'rgba(0,160,221,1)',
-                                shadowBlur: 4,
-                                barBorderRadius: [50, 50, 50, 50]
-                            }
-                        },
-                        label: {
-                            normal: {
-                                show: true,
-                                lineHeight: 10,
-                                formatter: '{c}',
-                                position: 'top',
-                                textStyle: {
-                                    color: '#fff',
-                                    fontSize: 12
-                                }
-
-                            }
-                        }
-                    },
-                    {
-                        type: 'bar',
-                        data: [35, 18, 24],
-                        barWidth: 9,
-                        barGap: 2,
-                        itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                    offset: 0,
-                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
-                                }, {
-                                    offset: 1,
-                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
-                                }], false),
-                                shadowColor: 'rgba(0,160,221,1)',
-                                shadowBlur: 4,
-                                barBorderRadius: [50, 50, 50, 50]
-                            }
-                        },
-                        label: {
-                            normal: {
-                                show: true,
-                                lineHeight: 10,
-                                formatter: '{c}',
-                                position: 'top',
-                                textStyle: {
-                                    color: '#fff',
-                                    fontSize: 12
-                                }
-
-                            }
-                        }
-                    },
-                ]
-            },
-            option3: {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
-                    borderColor: 'rgba(75, 253, 238, 0.4)',
-                    textStyle: {
-                        color: '#CFE3FC',
-                    },
-                    borderWidth: 1,
-                },
-                grid: {
-                    top: '15%',
-                    right: '5%',
-                    left: "8%",
-                    bottom: '13%'
-                },
-                xAxis: [{
-                    type: "value",
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        },
-                        formatter: "",
-                    },
-                    // splitLine: {
-                    //     lineStyle: {
-                    //         color: 'rgba(255,255,255,0.12)'
-                    //     }
-                    // }
-                }],
-                yAxis: [{
-                    name: "",
-                    type: 'category',
-                    data: ["2019", "2020", "2021"],
-                    axisLine: {
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    axisLabel: {
-                        margin: 10,
-                        color: '#e2e9ff',
-                        textStyle: {
-                            fontSize: 12
-                        },
-                    },
-                    axisTick: {
-                        show: false
-                    }
-                }],
-                series: [
-                    {
-                        name: "工业",
-                        type: 'bar',
-                        data: [24, 30, 12],
-                        barWidth: 9,
-                        itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                    offset: 0,
-                                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
-                                }, {
-                                    offset: 1,
-                                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
-                                }], false),
-                                shadowColor: 'rgba(0,160,221,1)',
-                                shadowBlur: 4,
-                                barBorderRadius: [50, 50, 50, 50]
-                            }
-                        },
-                        label: {
-                            normal: {
-                                show: true,
-                                lineHeight: 10,
-                                formatter: '{c}',
-                                position: 'top',
-                                textStyle: {
-                                    color: '#fff',
-                                    fontSize: 12
-                                }
-
-                            }
-                        }
-                    },
-                    {
-                        name: "楼宇",
-                        type: 'bar',
-                        data: [35, 18, 24],
-                        barWidth: 9,
-                        itemStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                    offset: 0,
-                                    color: 'rgba(1,197,185,1)' // 0% 处的颜色
-                                }, {
-                                    offset: 1,
-                                    color: 'rgba(1,197,185,1)' // 100% 处的颜色
-                                }], false),
-                                shadowColor: 'rgba(0,160,221,1)',
-                                shadowBlur: 4,
-                                barBorderRadius: [50, 50, 50, 50]
-                            }
-                        },
-                        label: {
-                            normal: {
-                                show: true,
-                                lineHeight: 10,
-                                formatter: '{c}',
-                                position: 'top',
-                                textStyle: {
-                                    color: '#fff',
-                                    fontSize: 12
-                                }
-
-                            }
-                        }
-                    },
-                ],
-                legend: {
-                    left: "right",
-                    data: [
-                        {
-                            icon: "pin",
-                            name: "工业",
-                        },
-                        {
-                            icon: "pin",
-                            name: "楼宇",
-                        }
-                    ],
-                    textStyle: {
-                        fontSize: 14,
-                        fontWeight: 400,
-                        color: "rgba(255,255,255,0.8)",
-                    },
-                }
-            },
-            infos: [
-                {
-                    time: "2021-10-02  11:13:52",
-                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                },
-                {
-                    time: "2021-10-02  11:13:52",
-                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                }, {
-                    time: "2021-10-02  11:13:52",
-                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                }, {
-                    time: "2021-10-02  11:13:52",
-                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                }, {
-                    time: "2021-10-02  11:13:52",
-                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                }, {
-                    time: "2021-10-02  11:13:52",
-                    info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                },
-            ],
-            lists: [
-                {
-                    title: "年度销售指标完成率",
-                    money: "7,965",
-                    tb: "12.23",
-                    hb: "27.16",
-                    percent: "80",
-                },
-                {
-                    title: "年度收益金额",
-                    money: "5,665",
-                    tb: "12.23",
-                    hb: "27.16",
-                    percent: "40",
-                }
-            ],
-            pclist: [
-                {
-                    name: "月度偏差电量",
-                    count: "5514",
-                    danwei: "MWh",
-                    hb: "27.16"
-                },
-                {
-                    name: "月度偏差率",
-                    count: "25",
-                    danwei: "%",
-                    hb: "27.16"
-                },
-            ]
-        };
-    },
-    methods: {
-        defineEcharts(dom, option) {
-            var chartDom = document.getElementById(dom);
-            var myChart = this.$echarts.init(chartDom, null, {
-                devicePixelRatio: 10, // 设置为2或更高的值
-            });
-            myChart.setOption(option);
-            window.addEventListener("resize", function () {
-                myChart.resize();
-            });
+  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,
         },
-        // 年度售电量
-        ndsdl() {
-            // 假数据
-            let left1 = {
-                code: 200,
-                msg: "人数趋势图获取成功",
-                data: {
-                    count: [
-                        153456,
-                        143456,
-                        163456,
-                        183456,
-                        163456,
-                        153456,
-                        163456,
-                        133456,
-                        163456,
-                        143456,
-                        103456,
-                        113456,
-                        153456,
-                        133456,
-                        143456
-                    ],
-                    time: [
-                        "01",
-                        "02",
-                        "03",
-                        "04",
-                        "05",
-                        "06",
-                        "07",
-                        "08",
-                        "09",
-                        "10",
-                        "11",
-                        "12"
-                    ]
-                }
-            };
-            //计算最大值
-            function maxNumCount(num) {
-                let maxNum = "";
-                //将数字转化为数组
-                let max = num.toString().split("");
-                for (var i = 0; i < max.length; i++) {
-                    if (i > 1) {
-                        maxNum += "0";
-                    }
-                }
-                //组装补0
-                if (maxNum.length > 1) {
-                    if (max[1] == "9") {
-                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
-                    } else {
-                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
-                    }
-                } else {
-                    maxNum = "100";
-                }
-                return maxNum;
-            }
-            //计算最小值
-            function minNumCount(num) {
-                if (num < 10000) {
-                    return "0";
-                }
-                let minNum = "";
-                //将数字转化为数组
-                let min = num.toString().split("");
-                for (var i = 0; i < min.length; i++) {
-                    //组装补0
-                    if (i > 1) {
-                        minNum += "0";
-                    }
-                }
-                if (min[1] == "0") {
-                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
-                } else {
-                    minNum = min[0] + parseInt(min[1]) + minNum;
-                }
-
-                return minNum;
-            }
-
-            let maxNum = Math.max(...left1.data.count);
-            let minNum = Math.min(...left1.data.count);
-            maxNum = maxNumCount(maxNum);
-            minNum = minNumCount(minNum);
-            let yName = "人数（万）";
-            if (maxNum > 9999999) {
-                yName = "人数（千万）";
-            }
-            var option;
-
-            option = {
-                grid: {
-                    width: "84%",
-                    height: "75%",
-                    top: "20%", //生成的图片和顶部的间距
-                    left: "5%",
-                    bottom: "0%",
-                    right: "16%",
-                    containLabel: true //为ture才会生效
-                },
-                tooltip: {
-                    trigger: "axis"
-                    //   axisPointer: {
-                    //     type: "shadow",
-                    //   },
-                },
-                xAxis: {
-                    // name: "日期",
-                    nameTextStyle: {
-                        color: "#03CECF",
-                        fontSize: 14
-                    },
-                    type: "category",
-                    boundaryGap: false,
-                    data: left1.data.time,
-                    axisLabel: {
-                        color: "#03CECF",
-                        fontSize: 14,
-                        margin: 10
-                        // interval: 0, //使x轴上的文字显示完全,
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "rgb(37,52,82)"
-                        }
-                    },
-                    axisTick: {
-                        show: false
-                    }
-                },
-                yAxis: {
-                    type: "value",
-                    name: yName,
-                    nameTextStyle: {
-                        color: "#03CECF",
-                        fontSize: 14
-                    },
-                    min: minNum,
-                    max: maxNum,
-                    axisLine: {
-                        lineStyle: {
-                            color: "rgb(37,52,82)"
-                        },
-                        show: true
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "rgba(37,52,82)"
-                        }
-                    },
-                    axisLabel: {
-                        color: "#03CECF",
-                        fontSize: 14,
-                        interval: 20,
-                        formatter: function (value, index) {
-                            if (yName.indexOf("千万") && maxNum > 10000000) {
-                                value = (value / 10000000).toFixed(2);
-                            } else if (maxNum > 10000 && maxNum < 10000000) {
-                                value = value / 10000;
-                            }
-                            return value;
-                        }
-                    }
-                },
-                splitLine: {
-                    show: false
-                },
-                series: [
-                    {
-                        data: left1.data.count,
-                        type: "line",
-                        showSymbol: true,
-                        itemStyle: {
-                            emphasis: {
-                                color: "rgb(7,162,148)",
-                                borderColor: "rgba(7,162,148,0.6)",
-                                borderWidth: 20
-                            },
-                            normal: {
-                                color: "rgb(62,195,221)",
-                                borderColor: "rgb(6,65,95)",
-                                lineStyle: {
-                                    color: "rgb(101,184,196)"
-                                }
-                            }
-                        },
-                        areaStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0,
-                                    0,
-                                    0,
-                                    1,
-                                    [
-                                        {
-                                            offset: 0,
-                                            color: "#68e3e5"
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: "rgba(24, 68, 121,0)"
-                                        }
-                                    ],
-                                    false
-                                )
-                            }
-                        }
-                    }
-                ]
-            };
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
         },
-        //偏差分析
-        pcfx() {
-            // mock 数据
-            const dataArr = {
-                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
-                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
-                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
-                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
-            }
-            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
-            // xAxis
-            const xAxis = {
-                axisTick: { show: true },
-                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
-                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
-                data: dataArr.xdata
-            }
-            // yAxis
-            const yAxis = [{
-                type: "value",
-                name: "单位MWh",
-                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-                axisLine: { show: false, lineStyle: { color: "#fff" } },
-                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
-            }, {
-                // 双y轴，主要用于折线图，所以不需要显示坐标
-                type: "value",
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [36, 45, 35, 40, 45, 27, 40, 42, 38, 44, 22, 16, 30, 40],
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
                 show: true,
-                min: -20,
-                max: 30,
-                axisLabel: {
-                    formatter: "{value}" + "%",
-                    textStyle: { fontSize: 12, color: '#fff' }
-                }
-            }]
-
-            // series
-            const series = [
-                {
-                    z: 1,
-                    // stack: '总量',
-                    type: 'bar',
-                    name: '电费',
-                    barWidth: 9,
-                    // barGap: '-100%',
-                    data: dataArr.disinfeced,
-                    itemStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0, x2: 1, y: 0, y2: 0,
-                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
-                        }
-                    },
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
                 },
-                {
-                    z: 2,
-                    // stack: '总量',
-                    type: 'bar',
-                    name: '',
-                    barWidth: 9,
-                    // barGap: '-100%',
-                    data: dataArr.disinfeced2,
-                    itemStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0, x2: 1, y: 0, y2: 0,
-                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
-                        }
-                    },
-                },
-                {
-                    z: 9,
-                    // 双y轴
-                    yAxisIndex: 1,
-                    name: '销售电价', type: 'line',
-                    symbol: 'circle',
-                    symbolSize: [6, 6],
-                    color: {
-                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                        // 0% 处的颜色                           // 100% 处的颜色
-                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
-                        global: false // 缺省为 false
-                    },
-                    lineStyle: {
-                        color: {
-                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                            // 0% 处的颜色                           // 100% 处的颜色
-                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
-                            global: false // 缺省为 false
-                        }
-                    },
-                    data: dataArr.rateData
-                },
-                {
-                    z: 9,
-                    // 双y轴
-                    yAxisIndex: 1,
-                    name: '', type: 'line',
-                    symbol: 'circle',
-                    symbolSize: [6, 6],
-                    color: {
-                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                        // 0% 处的颜色                           // 100% 处的颜色
-                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
-                        global: false // 缺省为 false
-                    },
-                    lineStyle: {
-                        color: {
-                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                            // 0% 处的颜色                           // 100% 处的颜色
-                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
-                            global: false // 缺省为 false
-                        }
-                    },
-                    data: dataArr.rateData2
-                }]
-            let option = { xAxis, yAxis, series, grid }
-            this.defineEcharts("pcfxb", option);
+              },
+            },
+          },
+        ],
+      },
+      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,
         },
-        yhhyzb() {
-            var trafficWay = [{
-                name: '钢铁',
-                value: 280
-            }, {
-                name: '水泥',
-                value: 280
-            }, {
-                name: '化工',
-                value: 280
-            }, {
-                name: '制造',
-                value: 280
-            }, {
-                name: '其他',
-                value: 280
-            }];
-            var data = [];
-            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
-            for (var i = 0; i < trafficWay.length; i++) {
-                data.push({
-                    value: trafficWay[i].value,
-                    name: trafficWay[i].name,
-                    itemStyle: {
-                        normal: {
-                            borderWidth: 5,
-                            shadowBlur: 20,
-                            borderColor: color[i],
-                            shadowColor: color[i]
-                        }
-                    }
-                }, {
-                    value: 60,
-                    name: "",
-                    itemStyle: {
-                        normal: {
-                            label: {
-                                show: false
-                            },
-                            labelLine: {
-                                show: false
-                            },
-                            color: 'rgba(0, 0, 0, 0)',
-                            borderColor: 'rgba(0, 0, 0, 0)',
-                            borderWidth: 0
-                        }
-                    }
-                });
-            }
-            var seriesOption = [{
-                name: '',
-                type: 'pie',
-                clockWise: false,
-                center: ["36%", '50%'],
-                radius: [105, 109],
-                hoverAnimation: false,
-                itemStyle: {
-                    normal: {
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                            color: '#00ffff'
-                        }
-                    }
-                },
-                data: data
-            }];
-            let option = {
-                color: color,
-                title: {
-                    text: '28%',
-                    subtext: "钢铁",
-                    top: '48%',
-                    textAlign: "center",
-                    left: "35%",
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 32,
-                        fontWeight: '400'
-                    },
-                    subtextStyle: {
-                        fontFamily: "微软雅黑",
-                        fontSize: 16,
-                        color: '#fff',
-                    }
-                },
-                graphic: {
-                    elements: [{
-                        type: "image",
-                        z: 3,
-                        style: {
-                            image: "transparent",
-                            width: 178,
-                            height: 178
-                        },
-                        left: 'center',
-                        top: 'center',
-                        position: [100, 100]
-                    }]
-                },
-                tooltip: {
-                    show: false
-                },
-                legend: {
-                    icon: "rect",
-                    orient: '',
-                    x: 'right',
-                    data: [{
-                        name: '钢铁',
-                        value: 280
-                    }, {
-                        name: '水泥',
-                        value: 280
-                    }, {
-                        name: '化工',
-                        value: 280
-                    }, {
-                        name: '制造',
-                        value: 280
-                    }, {
-                        name: '其他',
-                        value: 280
-                    }],
-                    formatter: function (name) {
-                        var percent = 0;
-                        var total = 0;
-                        for (var i = 0; i < trafficWay.length; i++) {
-                            total += trafficWay[i].value;
-                        }
-                        const item = trafficWay.filter((item) => item.name === name)[0];
-                        console.log(item);
-                        percent = ((item.value / total) * 100).toFixed(2);
-                        if (name !== '') {
-                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
-                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
-                        } else {
-                            return '';
-                        }
-                    },
-                    left: 320,
-                    bottom: 145,
-                    align: 'left',
-                    textStyle: {
-                        color: "#fff",
-                        rich: {
-                            name: {
-                                fontSize: 16,
-                                color: "#fff",
-                            },
-                            num: {
-                                fontSize: 12,
-                                color: color[1],
-                            }
-                        },
-                    },
-                    itemGap: 20
-                },
-                toolbox: {
-                    show: false
-                },
-                series: seriesOption
-            }
-            this.defineEcharts("yhhyzb", option)
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
         },
-    },
-    mounted() {
-        this.defineEcharts("ndqylfb", this.option1);
-        this.defineEcharts("ndsdl", this.option2);
-        this.defineEcharts("qyyh", this.option3);
-        this.pcfx();
-        this.yhhyzb();
-        var data = [
-            {
-                name: "南京市",
-                value: 1,
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
             },
-            {
-                name: "济南市",
-                value: 2,
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
             },
-            {
-                name: "徐州市",
-                value: 3,
+            axisTick: {
+              show: false,
             },
-            {
-                name: "常州市",
-                value: 4,
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：户",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
             },
-            {
-                name: "苏州市",
-                value: 5,
+            axisTick: {
+              show: false,
             },
-            {
-                name: "南通市",
-                value: 6,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
             },
-            {
-                name: "连云港市",
-                value: 7,
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
             },
-            {
-                name: "淮安市",
-                value: 8,
-            },
-            {
-                name: "盐城市",
-                value: 9,
-            },
-            {
-                name: "扬州市",
-                value: 10,
-            },
-            {
-                name: "镇江市",
-                value: 11,
-            },
-            {
-                name: "泰州市",
-                value: 12,
-            },
-            {
-                name: "宿迁市",
-                value: 13,
-            },
-        ];
-        var splitList = [
-            {
-                start: 1,
-                end: 1,
-                label: "济南市",
-                color: "#236da8",
-            },
-            {
-                start: 2,
-                end: 2,
-                label: "无锡市",
-                color: "#2884db",
-            },
-            {
-                start: 3,
-                end: 3,
-                label: "徐州市",
-                color: "#244779",
-            },
-            {
-                start: 4,
-                end: 4,
-                label: "常州市",
-                color: "#246198",
-            },
-            {
-                start: 5,
-                end: 5,
-                label: "苏州市",
-                color: "#2884db",
-            },
-            {
-                start: 6,
-                end: 6,
-                label: "南通市",
-                color: "#2884db",
-            },
-            {
-                start: 7,
-                end: 7,
-                label: "连云港市",
-                color: "#244779",
-            },
-            {
-                start: 8,
-                end: 8,
-                label: "淮安市",
-                color: "#244779",
-            },
-            {
-                start: 9,
-                end: 9,
-                label: "盐城市",
-                color: "#244779",
-            },
-            {
-                start: 10,
-                end: 10,
-                label: "扬州市",
-                color: "#246198",
-            },
-            {
-                start: 11,
-                end: 11,
-                label: "镇江市",
-                color: "#2884db",
-            },
-            {
-                start: 12,
-                end: 12,
-                label: "泰州市",
-                color: "#2884db",
-            },
-            {
-                start: 13,
-                end: 13,
-                label: "宿迁市",
-                color: "#244779",
-            },
-        ];
-        var chartDom = document.getElementById("map");
-        var myChart = this.$echarts.init(chartDom, null, {
-            devicePixelRatio: 10, // 设置为2或更高的值
-        });
-
-        //获取山东地图数据。
-        $.get(
-            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
-            function (geojson) {
-                echarts.registerMap("山东", geojson);
-                let option = {
-                    series: [
-                        {
-                            tooltip: {
-                                trigger: "item",
-                            },
-                            name: "山东",
-                            type: "map3D",
-                            map: "山东",
-                            boxDepth: 60, //地图倾斜度
-                            regionHeight: 6, //地图厚度
-                            label: {
-                                show: true, //是否显示市
-                                textStyle: {
-                                    color: "#fff", //文字颜色
-                                    fontSize: 12, //文字大小
-                                    fontFamily: "微软雅黑",
-                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
-                                },
-                            },
-                            itemStyle: {
-                                opacity: 1, // 透明度
-                                borderWidth: 1.5, //分界线宽度
-                                borderColor: "#0699E4", //分界线颜色
-                            },
-                            groundplane: {
-                                show: true,
-                            },
-                            data: data,
-                            //shading: 'realistic',
-                            // 真实感材质相关配置 shading: 'realistic'时有效
-                            realisticMaterial: {
-                                detailTexture: "#093099", // 纹理贴图
-                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                                metalness: 1, // 0材质是非金属 ，1金属
-                                roughnessAdjust: 0,
-                            },
-                            viewControl: {
-                                distance: 80, // 地图视角 控制初始大小
-                                rotateSensitivity: 1, // 旋转
-                                zoomSensitivity: 1, // 缩放
-                            },
-                        },
-                    ],
-                    dataRange: {
-                        show: false,
-                        splitList: splitList,
+          },
+        ],
+        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% 处的颜色
                     },
-                    animation: true,
-                };
-                myChart.setOption(option);
-                myChart.on("click", this.chartClick);
-                let chartClick = function (param) {
-                    console.log(param);
-                    myChart.setOption(option, false);
-                    window.addEventListener("resize", function () {
-                        myChart.resize();
-                    });
-                    var selectedPro = param.name;
-                    if (!cityProper[selectedPro]) {
-                        option.series.splice(1);
-                        option.legend = null;
-                        option.visualMap = null;
-                        myChart.setOption(option, true);
-                        return;
-                    }
-                    //获取点击区域数据
-                    $.get(cityProper[selectedPro], function (geojson) {
-                        echarts.registerMap(selectedPro, geojson);
-                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
-                        option.series[0] = {
-                            name: "",
-                            type: "map",
-                            map: selectedPro,
-                            boxDepth: 80, //地图倾斜度
-                            regionHeight: 5, //地图厚度
-                            itemStyle: {
-                                normal: {
-                                    label: {
-                                        show: true,
-                                    },
-                                },
-                                emphasis: {
-                                    label: {
-                                        show: true,
-                                    },
-                                },
-                            },
-                            groundplane: {
-                                show: false,
-                            },
-                            data: data,
-                            shading: "realistic",
-                            // 真实感材质相关配置 shading: 'realistic'时有效
-                            realisticMaterial: {
-                                detailTexture: "#fff", // 纹理贴图
-                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                                metalness: 0, // 0材质是非金属 ，1金属
-                                roughnessAdjust: 0,
-                            },
-                            viewControl: {
-                                distance: 100, // 地图视角 控制初始大小
-                                rotateSensitivity: 1, // 旋转
-                                zoomSensitivity: 1, // 缩放
-                            },
-                        };
-                        myChart.setOption(option);
-                    });
-                };
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            barGap: 2,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "13%",
+        },
+        xAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+              formatter: "",
+            },
+            // splitLine: {
+            //     lineStyle: {
+            //         color: 'rgba(255,255,255,0.12)'
+            //     }
+            // }
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            type: "category",
+            data: ["2019", "2020", "2021"],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "工业",
+            type: "bar",
+            data: [24, 30, 12],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+          {
+            name: "楼宇",
+            type: "bar",
+            data: [35, 18, 24],
+            barWidth: 9,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(1,197,185,1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(1,197,185,1)", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+                barBorderRadius: [50, 50, 50, 50],
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+        ],
+        legend: {
+          left: "right",
+          data: [
+            {
+              icon: "roundRect",
+              name: "工业",
+            },
+            {
+              icon: "roundRect",
+              name: "楼宇",
+            },
+          ],
+          textStyle: {
+            fontSize: 14,
+            fontWeight: 400,
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+      },
+      option4: {
+        // tooltip: {
+        //   trigger: "axis",
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "20%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: ["2019", "2020", "2021"],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:次",
+          min: 0,
+          max: 50,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 12,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 12,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              name: "削锋",
+            },
+            {
+              name: "填谷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            name: "削锋",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 2,
+            data: [42, 12, 42],
+            lineStyle: {
+              width: 2,
+              color: "#0AA7FF",
+            },
+            itemStyle: {
+              color: "#0AA7FF",
+            },
+          },
+          {
+            name: "填谷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 2,
+            data: [30, 1, 30],
+            lineStyle: {
+              width: 2,
+              color: "#23D3D9",
+            },
+            itemStyle: {
+              color: "#23D3D9",
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "需求响应补贴收益",
+          money: "1,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "120",
+        },
+      ],
+      lists2: [
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          title2: "填谷补贴收益",
+          money2: "452",
+        },
+      ],
+      pclist: [
+        {
+          name: "削锋次数",
+          count: "31",
+          danwei: "次",
+          hb: "95.8",
+        },
+        {
+          name: "填谷次数",
+          count: "20",
+          danwei: "次",
+          hb: "95.8",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    gongye() {
+      var echartData = [
+        {
+          value: 85.2,
+          name: "工业",
+        },
+        {
+          value: 14.8,
+          name: "楼宇",
+        },
+      ];
+      var rich = {
+        total: {
+          color: "#A2C7F3",
+          fontSize: 16,
+          align: "center",
+        },
+        white: {
+          color: "#a2c7f3",
+          align: "center",
+          fontSize: 12,
+          padding: [8, 0],
+        },
+      };
+      let option = {
+        title: {
+          text: "工业",
+          left: "center",
+          top: "51%",
+          padding: [10, 0],
+          textStyle: {
+            color: "#6B9DD7",
+            fontSize: 12,
+            fontWeight: "normal",
+            align: "center",
+          },
+        },
+        legend: {
+          icon: "rect",
+          x: "right",
+          // selectedMode: false,
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < echartData.length; i++) {
+              total += trafficWay[i].value;
             }
-        );
-    },
-    beforeDestroy() {
-        //离开页面后，删除屏幕监听，防止监听事件一直存在
-        window.removeEventListener("resize", this.getResize);
+            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: [echartData[0].name],
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: ["#fc962c", "#d83472"],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.defineEcharts("gongye", option);
     },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option1);
+    this.defineEcharts("ndsdl", this.option2);
+    this.defineEcharts("qyyh", this.option3);
+    this.defineEcharts("pcfxb", this.option4);
+    this.gongye();
+    this.xuefeng();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
 };
 </script>
 <style scoped lang="less">
 .box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
     width: 100%;
-    height: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
     display: flex;
-    flex-direction: column;
-    color: #fff;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
 
-    .title {
-        width: 100%;
-        height: 76px;
-        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 10px;
-
-        p {
-            width: 567px;
-            height: 47px;
-            font-size: 44px;
-            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
-            font-weight: 600;
-            line-height: 47px;
-            letter-spacing: 3px;
-            color: #fff;
-            margin-left: -60px;
-        }
-
-        img:nth-of-type(1) {
-            width: 231px;
-            height: 59px;
-        }
-
-        img:nth-of-type(2) {
-            width: 158px;
-            height: 28px;
-        }
+    p {
+      width: 567px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
     }
 
-    .containter {
-        width: 100%;
-        height: 967px;
-        display: flex;
+    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;
-        justify-content: space-between;
-
-        .left {
-            width: 436px;
-            height: 100%;
-
-            .ndqyyh {
-                // height: 27.22vh;
-                height: 294px;
-                //   width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-                background-size: cover;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-
-                .bg_title {
-                    width: 394px;
-                    height: 62px;
-                    background: url(../assets/zhsdy/组\ 3187.png);
-                    background-size: cover;
-                    position: absolute;
-                    top: 40px;
-                    display: flex;
-                    justify-content: space-around;
-
-                    .tit_first {
-                        width: 116px;
-                        height: 44px;
-                        font-size: 32px;
-                        font-weight: 700;
-                        color: #14ADFD;
-                        line-height: 44px;
-                        display: flex;
-
-                        .tit_danwei {
-                            height: 44px;
-                            font-size: 14px;
-                            font-weight: 400;
-                            margin-left: 5px;
-                            color: #FFFFFF;
-                            line-height: 44px;
-                        }
-                    }
-
-                    .tit_second {
-                        width: 132px;
-                        display: flex;
-                        justify-content: space-between;
-
-                        div {
-                            p:nth-child(1) {
-                                height: 24px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 24px;
-                            }
-
-                            p.tb_percent {
-                                width: 57px;
-                                height: 30px;
-                                font-size: 16px;
-                                font-weight: 700;
-                                color: #F2B810;
-                                line-height: 30px;
-                                display: flex;
-
-                                img {
-                                    width: 12px;
-                                    height: 12px;
-                                    margin-top: 4x;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                #qyyh {
-                    width: 100%;
-                    height: 180px;
-                    margin-top: 100px;
-                }
-            }
-
-            .ndsdl {
-                height: 315px;
-                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
-                background-size: cover;
-                margin-top: 6px;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                .bg_title {
-                    width: 394px;
-                    height: 62px;
-                    background: url(../assets/zhsdy/组\ 3187.png);
-                    background-size: cover;
-                    position: absolute;
-                    top: 40px;
-                    display: flex;
-                    justify-content: space-around;
-
-                    .tit_first {
-                        width: 116px;
-                        height: 44px;
-                        font-size: 32px;
-                        font-weight: 700;
-                        color: #14ADFD;
-                        line-height: 44px;
-                        display: flex;
-
-                        .tit_danwei {
-                            height: 44px;
-                            font-size: 14px;
-                            font-weight: 400;
-                            margin-left: 5px;
-                            color: #FFFFFF;
-                            line-height: 44px;
-                        }
-                    }
-
-                    .tit_second {
-                        width: 182px;
-                        display: flex;
-                        justify-content: space-between;
-
-                        div {
-                            p:nth-child(1) {
-                                height: 24px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 24px;
-                            }
-
-                            p.tb_percent {
-                                height: 30px;
-                                font-size: 16px;
-                                font-weight: 700;
-                                color: #F2B810;
-                                line-height: 30px;
-                                display: flex;
-
-                                img {
-                                    width: 12px;
-                                    height: 12px;
-                                    margin-top: 4x;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                #ndsdl {
-                    position: absolute;
-                    width: 100%;
-                    height: 200px;
-                    bottom: 10px;
-                }
-            }
+        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;
         }
 
-        .right {
-            width: 436px;
-            height: 100%;
+        .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;
 
-            .ndsdje {
-                height: 294px;
-                width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-                background-size: cover;
-                position: relative;
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
 
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                #ndsdje {
-                    width: 100%;
-                    height: 100%;
-                    padding-top: 50px;
-
-                    .infos {
-                        width: 396px;
-                        height: 104px;
-                        display: flex;
-                        justify-content: space-between;
-                        background: url(../assets/zhsdy/组\ 3168.png);
-                        background-size: cover;
-                        margin: 0 auto;
-                        margin-bottom: 15px;
-
-                        .first {
-                            width: 180px;
-
-                            p:nth-child(1) {
-                                width: 180px;
-                                height: 44px;
-                                display: flex;
-                                justify-content: space-between;
-
-                                img {
-                                    width: 15px;
-                                    height: 15px;
-                                    border: none;
-                                    display: block;
-                                    margin-top: 10px;
-                                    margin-left: 10px;
-                                }
-
-                                span.titles {
-                                    width: 140px;
-                                    height: 44px;
-                                    font-size: 14px;
-                                    font-weight: 400;
-                                    color: #FFFFFF;
-                                    line-height: 44px;
-                                    display: block;
-                                }
-                            }
-
-                            p.money {
-                                width: 145px;
-                                height: 44px;
-                                font-size: 40px;
-                                font-weight: 700;
-                                color: #52C2FF;
-                                line-height: 44px;
-
-                                .danwei {
-                                    color: #fff;
-                                    font-size: 14px;
-                                }
-                            }
-                        }
-
-                        .second {
-                            width: 172px;
-                            height: 100%;
-
-                            div.s_tit {
-                                width: 172px;
-                                display: flex;
-                                justify-content: space-around;
-
-                                p:nth-child(1) {
-                                    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%);
-                                }
-                            }
-                        }
-                    }
-                }
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
             }
+          }
 
-            .pcfx {
-                height: 294px;
-                width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-                background-size: cover;
-                position: relative;
-                margin-top: 6px;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                #pcfx {
-                    width: 100%;
-                    height: 100%;
-                    padding-top: 40px;
-
-                    .pc_tit {
-                        width: 398px;
-                        height: 48px;
-                        margin: 0 auto;
-                        background: url(../assets/zhsdy/组\ 3169.png);
-                        background-size: cover;
-                        display: flex;
-                        justify-content: space-between;
-                        margin-top: 5px;
-
-                        .pc_l {
-                            width: 272px;
-                            height: 48px;
-                            display: flex;
-                            justify-content: flex-start;
-
-                            .pc_name {
-                                margin-left: 18px;
-                                height: 44px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 44px;
-                                display: block;
-                            }
-
-                            img {
-                                width: 15px;
-                                height: 15px;
-                                margin-top: 18px;
-                                margin-left: 10px;
-                            }
-
-                            .pc_count {
-                                margin-left: 14px;
-                                height: 44px;
-                                font-size: 24px;
-                                font-weight: 700;
-                                color: #0AA7FF;
-                                line-height: 44px;
-                                display: block;
-                            }
-
-                            .pc_danwei {
-                                margin-left: 6px;
-                                height: 44px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 44px;
-                            }
-                        }
-
-                        .pc_r {
-                            margin-right: 20px;
-
-                            p:nth-child(1) {
-                                height: 24px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 24px;
-                            }
-
-                            p.tb_percent {
-                                height: 24px;
-                                font-size: 16px;
-                                font-weight: 700;
-                                color: #F2B810;
-                                line-height: 24px;
-                                display: flex;
-
-                                img {
-                                    width: 12px;
-                                    height: 12px;
-                                    margin-top: 8px;
-                                }
-                            }
-                        }
-                    }
-
-                    #pcfxb {
-                        width: 100%;
-                        height: 150px;
-                    }
-                }
-            }
-
-            .yhhyzb {
-                height: 353px;
-                width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
-                background-size: cover;
-                position: relative;
-                margin-top: 6px;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                #yhhyzb {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-
-        .footer {
-            position: absolute;
-            width: 1445px;
-            height: 325px;
-            bottom: 10px;
+          .tit_second {
+            width: 132px;
             display: flex;
             justify-content: space-between;
 
-            .ndqylfb {
-                width: 776px;
-                height: 100%;
-                background: url(../assets/zhsdy/用能量-框.png);
-                background-size: cover;
-                position: relative;
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
 
-                .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;
-                }
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
 
-                #ndqylfb {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            .ggzcxx {
-                width: 653px;
-                height: 325px;
-                background: url(../assets/zhsdy/组\ 3120.png);
-                background-size: cover;
-                position: relative;
-
-                .title {
-                    position: absolute;
-                    left: 50%;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                    transform: translateX(-50%);
-                }
-
-                #ggzcxx {
-                    width: 100%;
-                    margin-top: 60px;
-
-                    ul {
-                        width: 100%;
-
-
-                        li {
-                            width: 100%;
-                            height: 40px;
-                            padding: 0px 36px 0px 18px;
-                            box-sizing: border-box;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-
-                            .img {
-                                width: 12px;
-                                height: 12px;
-                                display: block;
-                            }
-
-                            .times {
-                                width: 145px;
-                                height: 36px;
-                                color: #52C2FF;
-                                font-size: 14px;
-                                line-height: 36px;
-                                display: block;
-                            }
-
-                            .info {
-                                width: 381px;
-                                height: 36px;
-                                white-space: nowrap;
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                                font-size: 14px;
-                                line-height: 36px;
-                                display: block;
-                            }
-                        }
-
-                        li:nth-child(2n+2) {
-                            background: #0E2C7E;
-                        }
-                    }
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
                 }
+              }
             }
+          }
         }
 
-        #map {
-            width: 994px;
-            position: absolute;
-            height: 627px;
-            left: 50%;
-            transform: translateX(-50%);
-            overflow: hidden;
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
         }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 5px;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 182px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
     }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 400px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 25px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_count {
+                margin-left: 51px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+          .xyzy1 {
+            display: flex;
+            justify-content: space-around;
+            #gongye {
+              width: 200px;
+              height: 200px;
+            }
+          }
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue
index 2c3c896..d8e461d 100644
--- a/src/views/ZHDY.vue
+++ b/src/views/ZHDY.vue
@@ -1,1880 +1,2016 @@
 <template>
-    <div class="box">
-        <div class="title">
-            <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
-            <p>智慧售电云平台</p>
-            <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
-        </div>
-        <div class="containter">
-            <div class="left">
-                <div class="ndqyyh">
-                    <p class="title">年度签约用户</p>
-                    <div class="bg_title">
-                        <p class="tit_first">2451<span class="tit_danwei">户</span></p>
-                        <div class="tit_second">
-                            <div>
-                                <p>同比</p>
-                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
-                            </div>
-                            <div>
-                                <p>环比</p>
-                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="qyyh"></div>
-                </div>
-                <div class="ndsdl">
-                    <p class="title">年度售电量</p>
-                    <div class="bg_title">
-                        <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
-                        <div class="tit_second">
-                            <div>
-                                <p>同比</p>
-                                <p class="tb_percent">12.23% <img src="../assets/zhsdy/325数值上升 (4).png" alt=""></p>
-                            </div>
-                            <div>
-                                <p>环比</p>
-                                <p class="tb_percent">27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="ndsdl"></div>
-                </div>
-            </div>
-            <div class="right">
-                <div class="ndsdje">
-                    <p class="title">年度售电金额</p>
-                    <div id="ndsdje">
-                        <div class="infos" v-for="(item, index) in lists" :key="index">
-                            <div class="first">
-                                <p>
-                                    <img src="../assets/zhsdy/组 3189.png" alt="">
-                                    <span class="titles">{{ item.title }}</span>
-                                </p>
-                                <p class="money">{{ item.money }}<span class="danwei">万元</span></p>
-                            </div>
-                            <div class="second">
-                                <div class="s_tit">
-                                    <div>
-                                        <p>同比</p>
-                                        <p class="tb_percent">{{ item.tb }}% <img src="../assets/zhsdy/325数值上升 (4).png"
-                                                alt=""></p>
-                                    </div>
-                                    <div>
-                                        <p>环比</p>
-                                        <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png"
-                                                alt="">
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="bigBox">
-                                    <div class="smallBox" :style="{ width: `${item.percent}px` }"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="pcfx">
-                    <p class="title">偏差分析</p>
-                    <div id="pcfx">
-                        <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
-                            <div class="pc_l">
-                                <img src="../assets/zhsdy/组 3192.png" alt="">
-                                <span class="pc_name">{{ item.name }}</span>
-                                <span class="pc_count">{{ item.count }}</span>
-                                <span class="pc_danwei">{{ item.danwei }}</span>
-                            </div>
-                            <div class="pc_r">
-                                <p>环比</p>
-                                <p class="tb_percent">{{ item.hb }}% <img src="../assets/zhsdy/325数值上升(1).png" alt=""> </p>
-                            </div>
-                        </div>
-                        <div id="pcfxb"></div>
-                    </div>
-                </div>
-                <div class="yhhyzb">
-                    <p class="title">用户行业占比</p>
-                    <div id="yhhyzb"></div>
-                </div>
-            </div>
-            <div id="map"></div>
-            <div class="footer">
-                <div class="ndqylfb">
-                    <p class="title">年度签约量分布</p>
-                    <div id="ndqylfb"></div>
-                </div>
-                <div class="ggzcxx">
-                    <p class="title">公告政策信息</p>
-                    <div id="ggzcxx">
-                        <ul>
-                            <li v-for="(item, index) in infos">
-                                <img src="../assets/zhsdy/组 3147.png" alt="" class="img">
-                                <span class="times">{{ item.time }}</span>
-                                <span class="info">{{ item.info }}</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div class="box">
+    <div class="title">
+      <img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
+      <p>智慧售电云平台</p>
+      <img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
     </div>
+    <div class="containter">
+      <div class="left">
+        <div class="ndqyyh">
+          <p class="title">年度签约用户</p>
+          <div class="bg_title">
+            <p class="tit_first">2451<span class="tit_danwei">户</span></p>
+            <div class="tit_second">
+              <div>
+                <p>同比</p>
+                <p class="tb_percent">
+                  12.23%
+                  <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                </p>
+              </div>
+              <div>
+                <p>环比</p>
+                <p class="tb_percent">
+                  27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="qyyh"></div>
+        </div>
+        <div class="ndsdl">
+          <p class="title">年度售电量</p>
+          <div class="bg_title">
+            <p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
+            <div class="tit_second">
+              <div>
+                <p>同比</p>
+                <p class="tb_percent">
+                  12.23%
+                  <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                </p>
+              </div>
+              <div>
+                <p>环比</p>
+                <p class="tb_percent">
+                  27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+          </div>
+          <div id="ndsdl"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="ndsdje">
+          <p class="title">年度售电金额</p>
+          <div id="ndsdje">
+            <div class="infos" v-for="(item, index) in lists" :key="index">
+              <div class="first">
+                <p>
+                  <img src="../assets/zhsdy/组 3189.png" alt="" />
+                  <span class="titles">{{ item.title }}</span>
+                </p>
+                <p class="money">
+                  {{ item.money }}<span class="danwei">万元</span>
+                </p>
+              </div>
+              <div class="second">
+                <div class="s_tit">
+                  <div>
+                    <p>同比</p>
+                    <p class="tb_percent">
+                      {{ item.tb }}%
+                      <img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
+                    </p>
+                  </div>
+                  <div>
+                    <p>环比</p>
+                    <p class="tb_percent">
+                      {{ item.hb }}%
+                      <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                    </p>
+                  </div>
+                </div>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${item.percent}px` }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pcfx">
+          <p class="title">偏差分析</p>
+          <div id="pcfx">
+            <div class="pc_tit" v-for="(item, index) in pclist" :key="index">
+              <div class="pc_l">
+                <img src="../assets/zhsdy/组 3192.png" alt="" />
+                <span class="pc_name">{{ item.name }}</span>
+                <span class="pc_count">{{ item.count }}</span>
+                <span class="pc_danwei">{{ item.danwei }}</span>
+              </div>
+              <div class="pc_r">
+                <p>环比</p>
+                <p class="tb_percent">
+                  {{ item.hb }}%
+                  <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
+                </p>
+              </div>
+            </div>
+            <div id="pcfxb"></div>
+          </div>
+        </div>
+        <div class="yhhyzb">
+          <p class="title">用户行业占比</p>
+          <div id="yhhyzb"></div>
+        </div>
+      </div>
+      <div id="map"></div>
+      <div class="footer">
+        <div class="ndqylfb">
+          <p class="title">年度签约量分布</p>
+          <div id="ndqylfb"></div>
+        </div>
+        <div class="ggzcxx">
+          <p class="title">公告政策信息</p>
+          <div id="ggzcxx">
+            <ul>
+              <li v-for="(item, index) in infos">
+                <img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
+                <span class="times">{{ item.time }}</span>
+                <span class="info">{{ item.info }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 const fontSizeRem = (size) => {
-    const clientWidth =
-        window.innerWidth ||
-        document.documentElement.clientWidth ||
-        document.body.clientWidth;
-    if (!clientWidth) return;
-    let fontSize = clientWidth / 1920; //尺寸大小
-    return size * fontSize;
-}
+  const clientWidth =
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+  if (!clientWidth) return;
+  let fontSize = clientWidth / 1920; //尺寸大小
+  return size * fontSize;
+};
 import * as echarts from "echarts";
 // import { fontSizeRem } from "../assets/function";
 export default {
-    data() {
-        return {
-            res: "日",
-            type: "电",
-            option: {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        type: 'shadow'
-                    },
-                    backgroundColor: 'rgba(9, 24, 48, 0.5)',
-                    borderColor: 'rgba(75, 253, 238, 0.4)',
-                    textStyle: {
-                        color: '#CFE3FC',
-                    },
-                    borderWidth: 1,
-                },
-                grid: {
-                    top: '15%',
-                    right: '5%',
-                    left: "8%",
-                    bottom: '12%'
-                },
-                xAxis: [{
-                    name: "",
-                    type: 'category',
-                    data: ["济南", "烟台", "威海", "德州", "滨州", "泰安", "临沂", "烟台", "青岛", "青岛", "青岛", "青岛", "青岛",],
-                    axisLine: {
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    axisLabel: {
-                        margin: 10,
-                        color: '#e2e9ff',
-                        textStyle: {
-                            fontSize: 12
-                        },
-                    },
-                    axisTick: {
-                        show: false
-                    }
-                }],
-                yAxis: [{
-                    name: "单位：MWh",
-                    axisLabel: {
-                        formatter: '{value}',
-                        color: '#e2e9ff',
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#FFFFFF'
-                        }
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255,255,255,0.12)'
-                        }
-                    }
-                }],
-                series: [{
-                    type: 'bar',
-                    data: [760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300, 400],
-                    barWidth: '30%',
-                    itemStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color: 'rgba(0,244,255,1)' // 0% 处的颜色
-                            }, {
-                                offset: 1,
-                                color: 'rgba(0,77,167,1)' // 100% 处的颜色
-                            }], false),
-                            shadowColor: 'rgba(0,160,221,1)',
-                            shadowBlur: 4,
-                        }
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            lineHeight: 10,
-                            formatter: '{c}',
-                            position: 'top',
-                            textStyle: {
-                                color: '#00D6F9',
-                                fontSize: 12
-                            }
-
-                        }
-                    }
-                }]
+  data() {
+    return {
+      res: "日",
+      type: "电",
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          backgroundColor: "rgba(9, 24, 48, 0.5)",
+          borderColor: "rgba(75, 253, 238, 0.4)",
+          textStyle: {
+            color: "#CFE3FC",
+          },
+          borderWidth: 1,
+        },
+        grid: {
+          top: "15%",
+          right: "5%",
+          left: "8%",
+          bottom: "12%",
+        },
+        xAxis: [
+          {
+            name: "",
+            type: "category",
+            data: [
+              "济南",
+              "烟台",
+              "威海",
+              "德州",
+              "滨州",
+              "泰安",
+              "临沂",
+              "烟台",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+              "青岛",
+            ],
+            axisLine: {
+              lineStyle: {
+                color: "#FFFFFF",
+              },
             },
-            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年第一季度店里市场交易信息报道情况啊啊大萨达实打实"
-                },
+            axisLabel: {
+              margin: 10,
+              color: "#e2e9ff",
+              textStyle: {
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "单位：MWh",
+            axisLabel: {
+              formatter: "{value}",
+              color: "#e2e9ff",
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.12)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            data: [
+              760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300,
+              400,
             ],
-            lists: [
-                {
-                    title: "年度销售指标完成率",
-                    money: "7,965",
-                    tb: "12.23",
-                    hb: "27.16",
-                    percent: "80",
-                },
-                {
-                    title: "年度收益金额",
-                    money: "5,665",
-                    tb: "12.23",
-                    hb: "27.16",
-                    percent: "40",
-                }
-            ],
-            pclist: [
-                {
-                    name: "月度偏差电量",
-                    count: "5514",
-                    danwei: "MWh",
-                    hb: "27.16"
-                },
-                {
-                    name: "月度偏差率",
-                    count: "25",
-                    danwei: "%",
-                    hb: "27.16"
-                },
-            ]
-        };
-    },
-    methods: {
-        defineEcharts(dom, option) {
-            var chartDom = document.getElementById(dom);
-            var myChart = this.$echarts.init(chartDom, null, {
-                devicePixelRatio: 10, // 设置为2或更高的值
-            });
-            myChart.setOption(option);
-            window.addEventListener("resize", function () {
-                myChart.resize();
-            });
-        },
-        qyyh() {
-            let option = {
-                // backgroundColor: '#081736',
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        lineStyle: {
-                            color: {
-                                type: 'linear',
-                                x: 0,
-                                y: 0,
-                                x2: 0,
-                                y2: 1,
-                                colorStops: [
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(0, 255, 233,0)'
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(255, 255, 255,1)'
-                                    },
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(0, 255, 233,0)'
-                                    }
-                                ],
-                                global: false
-                            }
-                        }
-                    }
-                },
-
-                grid: {
-                    top: '12%',
-                    left: '10%',
-                    right: '10%',
-                    bottom: '25%'
-                    // containLabel: true
-                },
-                xAxis: [
+            barWidth: "30%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
                     {
-                        type: 'category',
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#009dff'
-                            }
-                        },
-
-                        axisLabel: {
-                            color: '#fff',
-                            width: 100
-                        },
-                        splitLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#00BFF3',
-                                opacity: 0.23
-                            }
-                        },
-                        axisTick: {
-                            show: false
-                        },
-                        boundaryGap: false,
-                        data: [
-                            "01",
-                            "02",
-                            "03",
-                            "04",
-                            "05",
-                            "06",
-                            "07",
-                            "08",
-                            "09",
-                            "10",
-                            "11",
-                            "12",
-                        ] //this.$moment(data.times).format("HH-mm") ,
-                    }
-                ],
-
-                yAxis: [
-                    {
-                        type: 'value',
-                        min: 0,
-                        // max: 140,
-                        splitNumber: 4,
-                        splitLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#00BFF3',
-                                opacity: 0.23
-                            }
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#009dff'
-                            }
-                        },
-                        axisLabel: {
-                            show: true,
-                            margin: 20,
-                            textStyle: {
-                                color: '#fff'
-                            }
-                        },
-                        axisTick: {
-                            show: false
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: '',
-                        type: 'line',
-                        smooth: true,
-                        showAllSymbol: true,
-                        // symbol: 'circle',
-                        symbolSize: 2,
-                        lineStyle: {
-                            normal: {
-                                color: '#2CABE3'
-                            }
-                        },
-                        itemStyle: {
-                            color: '#2CABE3',
-                            borderColor: '#2CABE3',
-                            borderWidth: 2
-                        },
-                        data: [
-                            4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3,
-                            5, 8
-                        ] //data.values
+                      offset: 0,
+                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                     },
                     {
-                        name: '',
-                        type: 'line',
-                        smooth: true,
-                        showAllSymbol: true,
-                        // symbol: 'circle',
-                        symbolSize: 2,
-                        lineStyle: {
-                            normal: {
-                                color: '#7def86'
-                            }
-                        },
-                        itemStyle: {
-                            normal: {
-                                color: '#7def86',
-                                borderColor: 'rgba(0, 255, 240, 1)',
-                                lineStyle: {
-                                    color: 'rgba(0, 255, 240, 1)'
-                                }
-                            }
-                        },
-                        data: [
-                            3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1,
-                            7, 6
-                        ] //data.values
-                    }
-                ]
-            };
-            this.defineEcharts("qyyh", option)
-        },
-        // 年度售电量
-        ndsdl() {
-            // 假数据
-            let left1 = {
-                code: 200,
-                msg: "人数趋势图获取成功",
-                data: {
-                    count: [
-                        153456,
-                        143456,
-                        163456,
-                        183456,
-                        163456,
-                        153456,
-                        163456,
-                        133456,
-                        163456,
-                        143456,
-                        103456,
-                        113456,
-                        153456,
-                        133456,
-                        143456
-                    ],
-                    time: [
-                        "01",
-                        "02",
-                        "03",
-                        "04",
-                        "05",
-                        "06",
-                        "07",
-                        "08",
-                        "09",
-                        "10",
-                        "11",
-                        "12"
-                    ]
-                }
-            };
-            //计算最大值
-            function maxNumCount(num) {
-                let maxNum = "";
-                //将数字转化为数组
-                let max = num.toString().split("");
-                for (var i = 0; i < max.length; i++) {
-                    if (i > 1) {
-                        maxNum += "0";
-                    }
-                }
-                //组装补0
-                if (maxNum.length > 1) {
-                    if (max[1] == "9") {
-                        maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
-                    } else {
-                        maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
-                    }
-                } else {
-                    maxNum = "100";
-                }
-                return maxNum;
-            }
-            //计算最小值
-            function minNumCount(num) {
-                if (num < 10000) {
-                    return "0";
-                }
-                let minNum = "";
-                //将数字转化为数组
-                let min = num.toString().split("");
-                for (var i = 0; i < min.length; i++) {
-                    //组装补0
-                    if (i > 1) {
-                        minNum += "0";
-                    }
-                }
-                if (min[1] == "0") {
-                    minNum = parseInt(min[0]) - 1 + "9" + minNum;
-                } else {
-                    minNum = min[0] + parseInt(min[1]) + minNum;
-                }
-
-                return minNum;
-            }
-
-            let maxNum = Math.max(...left1.data.count);
-            let minNum = Math.min(...left1.data.count);
-            maxNum = maxNumCount(maxNum);
-            minNum = minNumCount(minNum);
-            let yName = "人数（万）";
-            if (maxNum > 9999999) {
-                yName = "人数（千万）";
-            }
-            var option;
-
-            option = {
-                grid: {
-                    width: "84%",
-                    height: "75%",
-                    top: "20%", //生成的图片和顶部的间距
-                    left: "5%",
-                    bottom: "0%",
-                    right: "16%",
-                    containLabel: true //为ture才会生效
-                },
-                tooltip: {
-                    trigger: "axis"
-                    //   axisPointer: {
-                    //     type: "shadow",
-                    //   },
-                },
-                xAxis: {
-                    // name: "日期",
-                    nameTextStyle: {
-                        color: "#03CECF",
-                        fontSize: 14
+                      offset: 1,
+                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                     },
-                    type: "category",
-                    boundaryGap: false,
-                    data: left1.data.time,
-                    axisLabel: {
-                        color: "#03CECF",
-                        fontSize: 14,
-                        margin: 10
-                        // interval: 0, //使x轴上的文字显示完全,
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "rgb(37,52,82)"
-                        }
-                    },
-                    axisTick: {
-                        show: false
-                    }
-                },
-                yAxis: {
-                    type: "value",
-                    name: yName,
-                    nameTextStyle: {
-                        color: "#03CECF",
-                        fontSize: 14
-                    },
-                    min: minNum,
-                    max: maxNum,
-                    axisLine: {
-                        lineStyle: {
-                            color: "rgb(37,52,82)"
-                        },
-                        show: true
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "rgba(37,52,82)"
-                        }
-                    },
-                    axisLabel: {
-                        color: "#03CECF",
-                        fontSize: 14,
-                        interval: 20,
-                        formatter: function (value, index) {
-                            if (yName.indexOf("千万") && maxNum > 10000000) {
-                                value = (value / 10000000).toFixed(2);
-                            } else if (maxNum > 10000 && maxNum < 10000000) {
-                                value = value / 10000;
-                            }
-                            return value;
-                        }
-                    }
-                },
-                splitLine: {
-                    show: false
-                },
-                series: [
-                    {
-                        data: left1.data.count,
-                        type: "line",
-                        showSymbol: true,
-                        itemStyle: {
-                            emphasis: {
-                                color: "rgb(7,162,148)",
-                                borderColor: "rgba(7,162,148,0.6)",
-                                borderWidth: 20
-                            },
-                            normal: {
-                                color: "rgb(62,195,221)",
-                                borderColor: "rgb(6,65,95)",
-                                lineStyle: {
-                                    color: "rgb(101,184,196)"
-                                }
-                            }
-                        },
-                        areaStyle: {
-                            normal: {
-                                color: new echarts.graphic.LinearGradient(
-                                    0,
-                                    0,
-                                    0,
-                                    1,
-                                    [
-                                        {
-                                            offset: 0,
-                                            color: "#68e3e5"
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: "rgba(24, 68, 121,0)"
-                                        }
-                                    ],
-                                    false
-                                )
-                            }
-                        }
-                    }
-                ]
-            };
-        },
-        //偏差分析
-        pcfx() {
-            // mock 数据
-            const dataArr = {
-                xdata: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
-                rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
-                rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
-                disinfeced: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
-                disinfeced2: [320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321],
-            }
-            const grid = { top: '20%', left: '10%', right: '10%', bottom: '15%' }
-            // xAxis
-            const xAxis = {
-                axisTick: { show: true },
-                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
-                axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
-                data: dataArr.xdata
-            }
-            // yAxis
-            const yAxis = [{
-                type: "value",
-                name: "单位MWh",
-                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-                axisLine: { show: false, lineStyle: { color: "#fff" } },
-                axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
-            }, {
-                // 双y轴，主要用于折线图，所以不需要显示坐标
-                type: "value",
+                  ],
+                  false
+                ),
+                shadowColor: "rgba(0,160,221,1)",
+                shadowBlur: 4,
+              },
+            },
+            label: {
+              normal: {
                 show: true,
-                min: -20,
-                max: 30,
-                axisLabel: {
-                    formatter: "{value}" + "%",
-                    textStyle: { fontSize: 12, color: '#fff' }
-                }
-            }]
-
-            // series
-            const series = [
-                {
-                    z: 1,
-                    // stack: '总量',
-                    type: 'bar',
-                    name: '电费',
-                    barWidth: 9,
-                    // barGap: '-100%',
-                    data: dataArr.disinfeced,
-                    itemStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0, x2: 1, y: 0, y2: 0,
-                            colorStops: [{ offset: 0, color: 'rgba(1, 197, 185, 1)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 0.5, color: 'rgba(1, 197, 185, .8)' }, { offset: 1, color: 'rgba(1, 197, 185, 1)' }]
-                        }
-                    },
+                lineHeight: 10,
+                formatter: "{c}",
+                position: "top",
+                textStyle: {
+                  color: "#00D6F9",
+                  fontSize: 12,
                 },
-                {
-                    z: 2,
-                    // stack: '总量',
-                    type: 'bar',
-                    name: '',
-                    barWidth: 9,
-                    // barGap: '-100%',
-                    data: dataArr.disinfeced2,
-                    itemStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0, x2: 1, y: 0, y2: 0,
-                            colorStops: [{ offset: 0, color: 'rgba(17, 195, 255, .7)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 0.5, color: 'rgba(17, 195, 255, .5)' }, { offset: 1, color: 'rgba(17, 195, 255, .7)' }]
-                        }
-                    },
-                },
-                {
-                    z: 9,
-                    // 双y轴
-                    yAxisIndex: 1,
-                    name: '销售电价', type: 'line',
-                    symbol: 'circle',
-                    symbolSize: [6, 6],
-                    color: {
-                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                        // 0% 处的颜色                           // 100% 处的颜色
-                        colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
-                        global: false // 缺省为 false
-                    },
-                    lineStyle: {
-                        color: {
-                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                            // 0% 处的颜色                           // 100% 处的颜色
-                            colorStops: [{ offset: 0, color: '#9DBA19 ' }, { offset: 1, color: '#9DBA19' }],
-                            global: false // 缺省为 false
-                        }
-                    },
-                    data: dataArr.rateData
-                },
-                {
-                    z: 9,
-                    // 双y轴
-                    yAxisIndex: 1,
-                    name: '', type: 'line',
-                    symbol: 'circle',
-                    symbolSize: [6, 6],
-                    color: {
-                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                        // 0% 处的颜色                           // 100% 处的颜色
-                        colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
-                        global: false // 缺省为 false
-                    },
-                    lineStyle: {
-                        color: {
-                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-                            // 0% 处的颜色                           // 100% 处的颜色
-                            colorStops: [{ offset: 0, color: '#01BC5A ' }, { offset: 1, color: '#01BC5A' }],
-                            global: false // 缺省为 false
-                        }
-                    },
-                    data: dataArr.rateData2
-                }]
-            let option = { xAxis, yAxis, series, grid }
-            this.defineEcharts("pcfxb", option);
+              },
+            },
+          },
+        ],
+      },
+      infos: [
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
         },
-        yhhyzb() {
-            var trafficWay = [{
-                name: '钢铁',
-                value: 280
-            }, {
-                name: '水泥',
-                value: 280
-            }, {
-                name: '化工',
-                value: 280
-            }, {
-                name: '制造',
-                value: 280
-            }, {
-                name: '其他',
-                value: 280
-            }];
-            var data = [];
-            var color = ['#00C6B7', '#058DDB', '#91D449', '#232A3C', '#7A7A7A', '#ff5b00', '#ff3000']
-            for (var i = 0; i < trafficWay.length; i++) {
-                data.push({
-                    value: trafficWay[i].value,
-                    name: trafficWay[i].name,
-                    itemStyle: {
-                        normal: {
-                            borderWidth: 5,
-                            shadowBlur: 20,
-                            borderColor: color[i],
-                            shadowColor: color[i]
-                        }
-                    }
-                }, {
-                    value: 60,
-                    name: "",
-                    itemStyle: {
-                        normal: {
-                            label: {
-                                show: false
-                            },
-                            labelLine: {
-                                show: false
-                            },
-                            color: 'rgba(0, 0, 0, 0)',
-                            borderColor: 'rgba(0, 0, 0, 0)',
-                            borderWidth: 0
-                        }
-                    }
-                });
-            }
-            var seriesOption = [{
-                name: '',
-                type: 'pie',
-                clockWise: false,
-                center: ["36%", '50%'],
-                radius: [105, 109],
-                hoverAnimation: false,
-                itemStyle: {
-                    normal: {
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                            color: '#00ffff'
-                        }
-                    }
-                },
-                data: data
-            }];
-            let option = {
-                color: color,
-                title: {
-                    text: '28%',
-                    subtext: "钢铁",
-                    top: '48%',
-                    textAlign: "center",
-                    left: "35%",
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 32,
-                        fontWeight: '400'
-                    },
-                    subtextStyle: {
-                        fontFamily: "微软雅黑",
-                        fontSize: 16,
-                        color: '#fff',
-                    }
-                },
-                graphic: {
-                    elements: [{
-                        type: "image",
-                        z: 3,
-                        style: {
-                            image: "transparent",
-                            width: 178,
-                            height: 178
-                        },
-                        left: 'center',
-                        top: 'center',
-                        position: [100, 100]
-                    }]
-                },
-                tooltip: {
-                    show: false
-                },
-                legend: {
-                    icon: "rect",
-                    orient: '',
-                    x: 'right',
-                    data: [{
-                        name: '钢铁',
-                        value: 280
-                    }, {
-                        name: '水泥',
-                        value: 280
-                    }, {
-                        name: '化工',
-                        value: 280
-                    }, {
-                        name: '制造',
-                        value: 280
-                    }, {
-                        name: '其他',
-                        value: 280
-                    }],
-                    formatter: function (name) {
-                        var percent = 0;
-                        var total = 0;
-                        for (var i = 0; i < trafficWay.length; i++) {
-                            total += trafficWay[i].value;
-                        }
-                        const item = trafficWay.filter((item) => item.name === name)[0];
-                        console.log(item);
-                        percent = ((item.value / total) * 100).toFixed(2);
-                        if (name !== '') {
-                            return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
-                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
-                        } else {
-                            return '';
-                        }
-                    },
-                    left: 320,
-                    bottom: 145,
-                    align: 'left',
-                    textStyle: {
-                        color: "#fff",
-                        rich: {
-                            name: {
-                                fontSize: 16,
-                                color: "#fff",
-                            },
-                            num: {
-                                fontSize: 12,
-                                color: color[1],
-                            }
-                        },
-                    },
-                    itemGap: 20
-                },
-                toolbox: {
-                    show: false
-                },
-                series: seriesOption
-            }
-            this.defineEcharts("yhhyzb", option)
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
         },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+        {
+          time: "2021-10-02  11:13:52",
+          info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
+        },
+      ],
+      lists: [
+        {
+          title: "年度销售指标完成率",
+          money: "7,965",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "80",
+        },
+        {
+          title: "年度收益金额",
+          money: "5,665",
+          tb: "12.23",
+          hb: "27.16",
+          percent: "40",
+        },
+      ],
+      pclist: [
+        {
+          name: "月度偏差电量",
+          count: "5514",
+          danwei: "MWh",
+          hb: "27.16",
+        },
+        {
+          name: "月度偏差率",
+          count: "25",
+          danwei: "%",
+          hb: "27.16",
+        },
+      ],
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
     },
-    mounted() {
-        this.defineEcharts("ndqylfb", this.option);
-        // this.defineEcharts("ynl", this.option1);
-        this.qyyh();
-        this.pcfx();
-        this.yhhyzb();
-        var data = [
-            {
-                name: "南京市",
-                value: 1,
+    qyyh() {
+      let option = {
+        // backgroundColor: '#081736',
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgba(0, 255, 233,0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(255, 255, 255,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(0, 255, 233,0)",
+                  },
+                ],
+                global: false,
+              },
             },
-            {
-                name: "济南市",
-                value: 2,
-            },
-            {
-                name: "徐州市",
-                value: 3,
-            },
-            {
-                name: "常州市",
-                value: 4,
-            },
-            {
-                name: "苏州市",
-                value: 5,
-            },
-            {
-                name: "南通市",
-                value: 6,
-            },
-            {
-                name: "连云港市",
-                value: 7,
-            },
-            {
-                name: "淮安市",
-                value: 8,
-            },
-            {
-                name: "盐城市",
-                value: 9,
-            },
-            {
-                name: "扬州市",
-                value: 10,
-            },
-            {
-                name: "镇江市",
-                value: 11,
-            },
-            {
-                name: "泰州市",
-                value: 12,
-            },
-            {
-                name: "宿迁市",
-                value: 13,
-            },
-        ];
-        var splitList = [
-            {
-                start: 1,
-                end: 1,
-                label: "济南市",
-                color: "#236da8",
-            },
-            {
-                start: 2,
-                end: 2,
-                label: "无锡市",
-                color: "#2884db",
-            },
-            {
-                start: 3,
-                end: 3,
-                label: "徐州市",
-                color: "#244779",
-            },
-            {
-                start: 4,
-                end: 4,
-                label: "常州市",
-                color: "#246198",
-            },
-            {
-                start: 5,
-                end: 5,
-                label: "苏州市",
-                color: "#2884db",
-            },
-            {
-                start: 6,
-                end: 6,
-                label: "南通市",
-                color: "#2884db",
-            },
-            {
-                start: 7,
-                end: 7,
-                label: "连云港市",
-                color: "#244779",
-            },
-            {
-                start: 8,
-                end: 8,
-                label: "淮安市",
-                color: "#244779",
-            },
-            {
-                start: 9,
-                end: 9,
-                label: "盐城市",
-                color: "#244779",
-            },
-            {
-                start: 10,
-                end: 10,
-                label: "扬州市",
-                color: "#246198",
-            },
-            {
-                start: 11,
-                end: 11,
-                label: "镇江市",
-                color: "#2884db",
-            },
-            {
-                start: 12,
-                end: 12,
-                label: "泰州市",
-                color: "#2884db",
-            },
-            {
-                start: 13,
-                end: 13,
-                label: "宿迁市",
-                color: "#244779",
-            },
-        ];
-        var chartDom = document.getElementById("map");
-        var myChart = this.$echarts.init(chartDom, null, {
-            devicePixelRatio: 10, // 设置为2或更高的值
-        });
+          },
+        },
 
-        //获取山东地图数据。
-        $.get(
-            "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
-            function (geojson) {
-                echarts.registerMap("山东", geojson);
-                let option = {
-                    series: [
-                        {
-                            tooltip: {
-                                trigger: "item",
-                            },
-                            name: "山东",
-                            type: "map3D",
-                            map: "山东",
-                            boxDepth: 60, //地图倾斜度
-                            regionHeight: 6, //地图厚度
-                            label: {
-                                show: true, //是否显示市
-                                textStyle: {
-                                    color: "#fff", //文字颜色
-                                    fontSize: 12, //文字大小
-                                    fontFamily: "微软雅黑",
-                                    backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
-                                },
-                            },
-                            itemStyle: {
-                                opacity: 1, // 透明度
-                                borderWidth: 1.5, //分界线宽度
-                                borderColor: "#0699E4", //分界线颜色
-                            },
-                            groundplane: {
-                                show: true,
-                            },
-                            data: data,
-                            //shading: 'realistic',
-                            // 真实感材质相关配置 shading: 'realistic'时有效
-                            realisticMaterial: {
-                                detailTexture: "#093099", // 纹理贴图
-                                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                                metalness: 1, // 0材质是非金属 ，1金属
-                                roughnessAdjust: 0,
-                            },
-                            viewControl: {
-                                distance: 80, // 地图视角 控制初始大小
-                                rotateSensitivity: 1, // 旋转
-                                zoomSensitivity: 1, // 缩放
-                            },
-                        },
-                    ],
-                    dataRange: {
-                        show: false,
-                        splitList: splitList,
+        grid: {
+          top: "12%",
+          left: "10%",
+          right: "10%",
+          bottom: "25%",
+          // containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#009dff",
+              },
+            },
+
+            axisLabel: {
+              color: "#fff",
+              width: 100,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#00BFF3",
+                opacity: 0.23,
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            boundaryGap: false,
+            data: [
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+            ], //this.$moment(data.times).format("HH-mm") ,
+          },
+        ],
+
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            // max: 140,
+            splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#00BFF3",
+                opacity: 0.23,
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#009dff",
+              },
+            },
+            axisLabel: {
+              show: true,
+              margin: 20,
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            // symbol: 'circle',
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#2CABE3",
+              },
+            },
+            itemStyle: {
+              color: "#2CABE3",
+              borderColor: "#2CABE3",
+              borderWidth: 2,
+            },
+            data: [
+              4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5,
+              4, 3, 5, 8,
+            ], //data.values
+          },
+          {
+            name: "",
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            // symbol: 'circle',
+            symbolSize: 2,
+            lineStyle: {
+              normal: {
+                color: "#7def86",
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "#7def86",
+                borderColor: "rgba(0, 255, 240, 1)",
+                lineStyle: {
+                  color: "rgba(0, 255, 240, 1)",
+                },
+              },
+            },
+            data: [
+              3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4,
+              2, 1, 7, 6,
+            ], //data.values
+          },
+        ],
+      };
+      this.defineEcharts("qyyh", option);
+    },
+    // 年度售电量
+    ndsdl() {
+      // 假数据
+      let left1 = {
+        code: 200,
+        msg: "人数趋势图获取成功",
+        data: {
+          count: [
+            153456, 143456, 163456, 183456, 163456, 153456, 163456, 133456,
+            163456, 143456, 103456, 113456, 153456, 133456, 143456,
+          ],
+          time: [
+            "01",
+            "02",
+            "03",
+            "04",
+            "05",
+            "06",
+            "07",
+            "08",
+            "09",
+            "10",
+            "11",
+            "12",
+          ],
+        },
+      };
+      //计算最大值
+      function maxNumCount(num) {
+        let maxNum = "";
+        //将数字转化为数组
+        let max = num.toString().split("");
+        for (var i = 0; i < max.length; i++) {
+          if (i > 1) {
+            maxNum += "0";
+          }
+        }
+        //组装补0
+        if (maxNum.length > 1) {
+          if (max[1] == "9") {
+            maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
+          } else {
+            maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
+          }
+        } else {
+          maxNum = "100";
+        }
+        return maxNum;
+      }
+      //计算最小值
+      function minNumCount(num) {
+        if (num < 10000) {
+          return "0";
+        }
+        let minNum = "";
+        //将数字转化为数组
+        let min = num.toString().split("");
+        for (var i = 0; i < min.length; i++) {
+          //组装补0
+          if (i > 1) {
+            minNum += "0";
+          }
+        }
+        if (min[1] == "0") {
+          minNum = parseInt(min[0]) - 1 + "9" + minNum;
+        } else {
+          minNum = min[0] + parseInt(min[1]) + minNum;
+        }
+
+        return minNum;
+      }
+
+      let maxNum = Math.max(...left1.data.count);
+      let minNum = Math.min(...left1.data.count);
+      maxNum = maxNumCount(maxNum);
+      minNum = minNumCount(minNum);
+      let yName = "人数（万）";
+      if (maxNum > 9999999) {
+        yName = "人数（千万）";
+      }
+      var option;
+
+      option = {
+        grid: {
+          width: "84%",
+          height: "75%",
+          top: "20%", //生成的图片和顶部的间距
+          left: "5%",
+          bottom: "0%",
+          right: "16%",
+          containLabel: true, //为ture才会生效
+        },
+        tooltip: {
+          trigger: "axis",
+          //   axisPointer: {
+          //     type: "shadow",
+          //   },
+        },
+        xAxis: {
+          // name: "日期",
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          type: "category",
+          boundaryGap: false,
+          data: left1.data.time,
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            margin: 10,
+            // interval: 0, //使x轴上的文字显示完全,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: yName,
+          nameTextStyle: {
+            color: "#03CECF",
+            fontSize: 14,
+          },
+          min: minNum,
+          max: maxNum,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(37,52,82)",
+            },
+            show: true,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(37,52,82)",
+            },
+          },
+          axisLabel: {
+            color: "#03CECF",
+            fontSize: 14,
+            interval: 20,
+            formatter: function (value, index) {
+              if (yName.indexOf("千万") && maxNum > 10000000) {
+                value = (value / 10000000).toFixed(2);
+              } else if (maxNum > 10000 && maxNum < 10000000) {
+                value = value / 10000;
+              }
+              return value;
+            },
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        series: [
+          {
+            data: left1.data.count,
+            type: "line",
+            showSymbol: true,
+            itemStyle: {
+              emphasis: {
+                color: "rgb(7,162,148)",
+                borderColor: "rgba(7,162,148,0.6)",
+                borderWidth: 20,
+              },
+              normal: {
+                color: "rgb(62,195,221)",
+                borderColor: "rgb(6,65,95)",
+                lineStyle: {
+                  color: "rgb(101,184,196)",
+                },
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "#68e3e5",
                     },
-                    animation: true,
-                };
-                myChart.setOption(option);
-                myChart.on("click", this.chartClick);
-                let chartClick = function (param) {
-                    console.log(param);
-                    myChart.setOption(option, false);
-                    window.addEventListener("resize", function () {
-                        myChart.resize();
-                    });
-                    var selectedPro = param.name;
-                    if (!cityProper[selectedPro]) {
-                        option.series.splice(1);
-                        option.legend = null;
-                        option.visualMap = null;
-                        myChart.setOption(option, true);
-                        return;
-                    }
-                    //获取点击区域数据
-                    $.get(cityProper[selectedPro], function (geojson) {
-                        echarts.registerMap(selectedPro, geojson);
-                        //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
-                        option.series[0] = {
-                            name: "",
-                            type: "map",
-                            map: selectedPro,
-                            boxDepth: 80, //地图倾斜度
-                            regionHeight: 5, //地图厚度
-                            itemStyle: {
-                                normal: {
-                                    label: {
-                                        show: true,
-                                    },
-                                },
-                                emphasis: {
-                                    label: {
-                                        show: true,
-                                    },
-                                },
-                            },
-                            groundplane: {
-                                show: false,
-                            },
-                            data: data,
-                            shading: "realistic",
-                            // 真实感材质相关配置 shading: 'realistic'时有效
-                            realisticMaterial: {
-                                detailTexture: "#fff", // 纹理贴图
-                                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
-                                metalness: 0, // 0材质是非金属 ，1金属
-                                roughnessAdjust: 0,
-                            },
-                            viewControl: {
-                                distance: 100, // 地图视角 控制初始大小
-                                rotateSensitivity: 1, // 旋转
-                                zoomSensitivity: 1, // 缩放
-                            },
-                        };
-                        myChart.setOption(option);
-                    });
-                };
-            }
+                    {
+                      offset: 1,
+                      color: "rgba(24, 68, 121,0)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+          },
+        ],
+      };
+    },
+    //偏差分析
+    pcfx() {
+      // mock 数据
+      const dataArr = {
+        xdata: [
+          "01",
+          "02",
+          "03",
+          "04",
+          "05",
+          "06",
+          "07",
+          "08",
+          "09",
+          "10",
+          "11",
+          "12",
+        ],
+        rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
+        rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
+        disinfeced: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+        disinfeced2: [
+          320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
+        ],
+      };
+      const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位MWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: -20,
+          max: 30,
+          axisLabel: {
+            formatter: "{value}" + "%",
+            textStyle: { fontSize: 12, color: "#fff" },
+          },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 1,
+          // stack: '总量',
+          type: "bar",
+          name: "电费",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(1, 197, 185, 1)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 0.5, color: "rgba(1, 197, 185, .8)" },
+                { offset: 1, color: "rgba(1, 197, 185, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 2,
+          // stack: '总量',
+          type: "bar",
+          name: "",
+          barWidth: 9,
+          // barGap: '-100%',
+          data: dataArr.disinfeced2,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(17, 195, 255, .7)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 0.5, color: "rgba(17, 195, 255, .5)" },
+                { offset: 1, color: "rgba(17, 195, 255, .7)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#9DBA19 " },
+              { offset: 1, color: "#9DBA19" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#9DBA19 " },
+                { offset: 1, color: "#9DBA19" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData,
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [6, 6],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#01BC5A " },
+              { offset: 1, color: "#01BC5A" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#01BC5A " },
+                { offset: 1, color: "#01BC5A" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          data: dataArr.rateData2,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
+      this.defineEcharts("pcfxb", option);
+    },
+    yhhyzb() {
+      var trafficWay = [
+        {
+          name: "钢铁",
+          value: 280,
+        },
+        {
+          name: "水泥",
+          value: 280,
+        },
+        {
+          name: "化工",
+          value: 280,
+        },
+        {
+          name: "制造",
+          value: 280,
+        },
+        {
+          name: "其他",
+          value: 280,
+        },
+      ];
+      var data = [];
+      var color = [
+        "#00C6B7",
+        "#058DDB",
+        "#91D449",
+        "#232A3C",
+        "#7A7A7A",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 60,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
         );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          center: ["36%", "50%"],
+          radius: [105, 109],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      let option = {
+        color: color,
+        title: {
+          text: "28%",
+          subtext: "钢铁",
+          top: "48%",
+          textAlign: "center",
+          left: "35%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 32,
+            fontWeight: "400",
+          },
+          subtextStyle: {
+            fontFamily: "微软雅黑",
+            fontSize: 16,
+            color: "#fff",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "钢铁",
+              value: 280,
+            },
+            {
+              name: "水泥",
+              value: 280,
+            },
+            {
+              name: "化工",
+              value: 280,
+            },
+            {
+              name: "制造",
+              value: 280,
+            },
+            {
+              name: "其他",
+              value: 280,
+            },
+          ],
+          formatter: function (name) {
+            var percent = 0;
+            var total = 0;
+            for (var i = 0; i < trafficWay.length; i++) {
+              total += trafficWay[i].value;
+            }
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            console.log(item);
+            percent = ((item.value / total) * 100).toFixed(2);
+            if (name !== "") {
+              return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+              // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+            } else {
+              return "";
+            }
+          },
+          left: 320,
+          bottom: 145,
+          align: "left",
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 16,
+                color: "#fff",
+              },
+              num: {
+                fontSize: 12,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      this.defineEcharts("yhhyzb", option);
     },
-    beforeDestroy() {
-        //离开页面后，删除屏幕监听，防止监听事件一直存在
-        window.removeEventListener("resize", this.getResize);
-    },
+  },
+  mounted() {
+    this.defineEcharts("ndqylfb", this.option);
+    // this.defineEcharts("ynl", this.option1);
+    this.qyyh();
+    this.pcfx();
+    this.yhhyzb();
+    var data = [
+      {
+        name: "南京市",
+        value: 1,
+      },
+      {
+        name: "济南市",
+        value: 2,
+      },
+      {
+        name: "徐州市",
+        value: 3,
+      },
+      {
+        name: "常州市",
+        value: 4,
+      },
+      {
+        name: "苏州市",
+        value: 5,
+      },
+      {
+        name: "南通市",
+        value: 6,
+      },
+      {
+        name: "连云港市",
+        value: 7,
+      },
+      {
+        name: "淮安市",
+        value: 8,
+      },
+      {
+        name: "盐城市",
+        value: 9,
+      },
+      {
+        name: "扬州市",
+        value: 10,
+      },
+      {
+        name: "镇江市",
+        value: 11,
+      },
+      {
+        name: "泰州市",
+        value: 12,
+      },
+      {
+        name: "宿迁市",
+        value: 13,
+      },
+    ];
+    var splitList = [
+      {
+        start: 1,
+        end: 1,
+        label: "济南市",
+        color: "#236da8",
+      },
+      {
+        start: 2,
+        end: 2,
+        label: "无锡市",
+        color: "#2884db",
+      },
+      {
+        start: 3,
+        end: 3,
+        label: "徐州市",
+        color: "#244779",
+      },
+      {
+        start: 4,
+        end: 4,
+        label: "常州市",
+        color: "#246198",
+      },
+      {
+        start: 5,
+        end: 5,
+        label: "苏州市",
+        color: "#2884db",
+      },
+      {
+        start: 6,
+        end: 6,
+        label: "南通市",
+        color: "#2884db",
+      },
+      {
+        start: 7,
+        end: 7,
+        label: "连云港市",
+        color: "#244779",
+      },
+      {
+        start: 8,
+        end: 8,
+        label: "淮安市",
+        color: "#244779",
+      },
+      {
+        start: 9,
+        end: 9,
+        label: "盐城市",
+        color: "#244779",
+      },
+      {
+        start: 10,
+        end: 10,
+        label: "扬州市",
+        color: "#246198",
+      },
+      {
+        start: 11,
+        end: 11,
+        label: "镇江市",
+        color: "#2884db",
+      },
+      {
+        start: 12,
+        end: 12,
+        label: "泰州市",
+        color: "#2884db",
+      },
+      {
+        start: 13,
+        end: 13,
+        label: "宿迁市",
+        color: "#244779",
+      },
+    ];
+    var chartDom = document.getElementById("map");
+    var myChart = this.$echarts.init(chartDom, null, {
+      devicePixelRatio: 10, // 设置为2或更高的值
+    });
+
+    //获取山东地图数据。
+    $.get(
+      "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+      function (geojson) {
+        echarts.registerMap("山东", geojson);
+        let option = {
+          series: [
+            {
+              tooltip: {
+                trigger: "item",
+              },
+              name: "山东",
+              type: "map3D",
+              map: "山东",
+              boxDepth: 60, //地图倾斜度
+              regionHeight: 6, //地图厚度
+              label: {
+                show: true, //是否显示市
+                textStyle: {
+                  color: "#fff", //文字颜色
+                  fontSize: 12, //文字大小
+                  fontFamily: "微软雅黑",
+                  backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
+                },
+              },
+              itemStyle: {
+                opacity: 1, // 透明度
+                borderWidth: 1.5, //分界线宽度
+                borderColor: "#0699E4", //分界线颜色
+              },
+              groundplane: {
+                show: true,
+              },
+              data: data,
+              //shading: 'realistic',
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#093099", // 纹理贴图
+                textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 1, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 80, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            },
+          ],
+          dataRange: {
+            show: false,
+            splitList: splitList,
+          },
+          animation: true,
+        };
+        myChart.setOption(option);
+        myChart.on("click", this.chartClick);
+        let chartClick = function (param) {
+          console.log(param);
+          myChart.setOption(option, false);
+          window.addEventListener("resize", function () {
+            myChart.resize();
+          });
+          var selectedPro = param.name;
+          if (!cityProper[selectedPro]) {
+            option.series.splice(1);
+            option.legend = null;
+            option.visualMap = null;
+            myChart.setOption(option, true);
+            return;
+          }
+          //获取点击区域数据
+          $.get(cityProper[selectedPro], function (geojson) {
+            echarts.registerMap(selectedPro, geojson);
+            //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            option.series[0] = {
+              name: "",
+              type: "map",
+              map: selectedPro,
+              boxDepth: 80, //地图倾斜度
+              regionHeight: 5, //地图厚度
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true,
+                  },
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                  },
+                },
+              },
+              groundplane: {
+                show: false,
+              },
+              data: data,
+              shading: "realistic",
+              // 真实感材质相关配置 shading: 'realistic'时有效
+              realisticMaterial: {
+                detailTexture: "#fff", // 纹理贴图
+                textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+                metalness: 0, // 0材质是非金属 ，1金属
+                roughnessAdjust: 0,
+              },
+              viewControl: {
+                distance: 100, // 地图视角 控制初始大小
+                rotateSensitivity: 1, // 旋转
+                zoomSensitivity: 1, // 缩放
+              },
+            };
+            myChart.setOption(option);
+          });
+        };
+      }
+    );
+  },
+  beforeDestroy() {
+    //离开页面后，删除屏幕监听，防止监听事件一直存在
+    window.removeEventListener("resize", this.getResize);
+  },
 };
 </script>
 <style scoped lang="less">
 .box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+
+  .title {
     width: 100%;
-    height: 100%;
+    height: 76px;
+    background: url(../assets/客户侧总体用能情况分析/标题背景.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
     display: flex;
-    flex-direction: column;
-    color: #fff;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
 
-    .title {
-        width: 100%;
-        height: 76px;
-        background: url(../assets/客户侧总体用能情况分析/标题背景.png);
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 10px;
-
-        p {
-            width: 527px;
-            height: 47px;
-            font-size: 44px;
-            font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
-            font-weight: 600;
-            line-height: 47px;
-            letter-spacing: 3px;
-            color: #fff;
-            margin-left: -60px;
-        }
-
-        img:nth-of-type(1) {
-            width: 231px;
-            height: 59px;
-        }
-
-        img:nth-of-type(2) {
-            width: 158px;
-            height: 28px;
-        }
+    p {
+      width: 527px;
+      height: 47px;
+      font-size: 44px;
+      font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
+      font-weight: 600;
+      line-height: 47px;
+      letter-spacing: 3px;
+      color: #fff;
+      margin-left: -60px;
     }
 
-    .containter {
-        width: 100%;
-        height: 967px;
-        display: flex;
+    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;
-        justify-content: space-between;
-
-        .left {
-            width: 436px;
-            height: 100%;
-
-            .ndqyyh {
-                // height: 27.22vh;
-                height: 294px;
-                //   width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-                background-size: cover;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-
-                .bg_title {
-                    width: 394px;
-                    height: 62px;
-                    background: url(../assets/zhsdy/组\ 3187.png);
-                    background-size: cover;
-                    position: absolute;
-                    top: 40px;
-                    display: flex;
-                    justify-content: space-around;
-
-                    .tit_first {
-                        width: 116px;
-                        height: 44px;
-                        font-size: 32px;
-                        font-weight: 700;
-                        color: #14ADFD;
-                        line-height: 44px;
-                        display: flex;
-
-                        .tit_danwei {
-                            width: 14px;
-                            height: 44px;
-                            font-size: 14px;
-                            font-weight: 400;
-                            color: #FFFFFF;
-                            line-height: 44px;
-                        }
-                    }
-
-                    .tit_second {
-                        width: 132px;
-                        display: flex;
-                        justify-content: space-between;
-
-                        div {
-                            p:nth-child(1) {
-                                width: 28px;
-                                height: 24px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 24px;
-                            }
-
-                            p.tb_percent {
-                                width: 57px;
-                                height: 30px;
-                                font-size: 16px;
-                                font-weight: 700;
-                                color: #F2B810;
-                                line-height: 30px;
-                                display: flex;
-
-                                img {
-                                    width: 12px;
-                                    height: 12px;
-                                    margin-top: 4x;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                #qyyh {
-                    width: 100%;
-                    height: 180px;
-                    margin-top: 100px;
-                }
-            }
-
-            .ndsdl {
-                height: 315px;
-                background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
-                background-size: cover;
-                margin-top: 6px;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                .bg_title {
-                    width: 394px;
-                    height: 62px;
-                    background: url(../assets/zhsdy/组\ 3187.png);
-                    background-size: cover;
-                    position: absolute;
-                    top: 40px;
-                    display: flex;
-                    justify-content: space-around;
-
-                    .tit_first {
-                        width: 116px;
-                        height: 44px;
-                        font-size: 32px;
-                        font-weight: 700;
-                        color: #14ADFD;
-                        line-height: 44px;
-                        display: flex;
-
-                        .tit_danwei {
-                            width: 14px;
-                            height: 44px;
-                            font-size: 14px;
-                            font-weight: 400;
-                            color: #FFFFFF;
-                            line-height: 44px;
-                        }
-                    }
-
-                    .tit_second {
-                        width: 132px;
-                        display: flex;
-                        justify-content: space-between;
-
-                        div {
-                            p:nth-child(1) {
-                                width: 28px;
-                                height: 24px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 24px;
-                            }
-
-                            p.tb_percent {
-                                width: 57px;
-                                height: 30px;
-                                font-size: 16px;
-                                font-weight: 700;
-                                color: #F2B810;
-                                line-height: 30px;
-                                display: flex;
-
-                                img {
-                                    width: 12px;
-                                    height: 12px;
-                                    margin-top: 4x;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                #ndsdl {
-                    position: absolute;
-                    width: 100%;
-                    height: 200px;
-                    bottom: 10px;
-                }
-            }
+        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;
         }
 
-        .right {
-            width: 436px;
-            height: 100%;
+        .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;
 
-            .ndsdje {
-                height: 294px;
-                width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-                background-size: cover;
-                position: relative;
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
 
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                #ndsdje {
-                    width: 100%;
-                    height: 100%;
-                    padding-top: 50px;
-
-                    .infos {
-                        width: 396px;
-                        height: 104px;
-                        display: flex;
-                        justify-content: space-between;
-                        background: url(../assets/zhsdy/组\ 3168.png);
-                        background-size: cover;
-                        margin: 0 auto;
-                        margin-bottom: 15px;
-
-                        .first {
-                            width: 180px;
-
-                            p:nth-child(1) {
-                                width: 180px;
-                                height: 44px;
-                                display: flex;
-                                justify-content: space-between;
-
-                                img {
-                                    width: 15px;
-                                    height: 15px;
-                                    border: none;
-                                    display: block;
-                                    margin-top: 10px;
-                                    margin-left: 10px;
-                                }
-
-                                span.titles {
-                                    width: 140px;
-                                    height: 44px;
-                                    font-size: 14px;
-                                    font-weight: 400;
-                                    color: #FFFFFF;
-                                    line-height: 44px;
-                                    display: block;
-                                }
-                            }
-
-                            p.money {
-                                width: 145px;
-                                height: 44px;
-                                font-size: 40px;
-                                font-weight: 700;
-                                color: #52C2FF;
-                                line-height: 44px;
-
-                                .danwei {
-                                    color: #fff;
-                                    font-size: 14px;
-                                }
-                            }
-                        }
-
-                        .second {
-                            width: 172px;
-                            height: 100%;
-
-                            div.s_tit {
-                                width: 172px;
-                                display: flex;
-                                justify-content: space-around;
-
-                                p:nth-child(1) {
-                                    width: 28px;
-                                    height: 36px;
-                                    font-size: 14px;
-                                    font-weight: 400;
-                                    color: #FFFFFF;
-                                    line-height: 36px;
-                                }
-
-                                p.tb_percent {
-                                    width: 57px;
-                                    height: 30px;
-                                    font-size: 16px;
-                                    font-weight: 700;
-                                    color: #F2B810;
-                                    line-height: 30px;
-                                    display: flex;
-
-                                    img {
-                                        width: 12px;
-                                        height: 12px;
-                                        margin-top: 8px;
-                                    }
-                                }
-                            }
-
-                            .bigBox {
-                                width: 172px;
-                                height: 10px;
-                                background-color: #273546;
-                                border-radius: 67px 67px 67px 67px;
-                                margin-top: 5px;
-
-                                .smallBox {
-                                    width: 100px;
-                                    height: 10px;
-                                    border-radius: 67px 67px 67px 67px;
-                                    background: linear-gradient(to right,
-                                            rgba(38, 206, 253, 1) 20%,
-                                            rgba(42, 254, 255, 1) 100%,
-                                            rgba(38, 206, 253, 1) 20%);
-                                }
-                            }
-                        }
-                    }
-                }
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
             }
+          }
 
-            .pcfx {
-                height: 294px;
-                width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-                background-size: cover;
-                position: relative;
-                margin-top: 6px;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                #pcfx {
-                    width: 100%;
-                    height: 100%;
-                    padding-top: 40px;
-
-                    .pc_tit {
-                        width: 398px;
-                        height: 48px;
-                        margin: 0 auto;
-                        background: url(../assets/zhsdy/组\ 3169.png);
-                        background-size: cover;
-                        display: flex;
-                        justify-content: space-between;
-                        margin-top: 5px;
-
-                        .pc_l {
-                            width: 272px;
-                            height: 48px;
-                            display: flex;
-                            justify-content: flex-start;
-
-                            .pc_name {
-                                margin-left: 18px;
-                                height: 44px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 44px;
-                                display: block;
-                            }
-
-                            img {
-                                width: 15px;
-                                height: 15px;
-                                margin-top: 18px;
-                                margin-left: 10px;
-                            }
-
-                            .pc_count {
-                                margin-left: 14px;
-                                height: 44px;
-                                font-size: 24px;
-                                font-weight: 700;
-                                color: #0AA7FF;
-                                line-height: 44px;
-                                display: block;
-                            }
-
-                            .pc_danwei {
-                                margin-left: 6px;
-                                width: 33px;
-                                height: 44px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 44px;
-                            }
-                        }
-
-                        .pc_r {
-                            margin-right: 20px;
-
-                            p:nth-child(1) {
-                                width: 28px;
-                                height: 24px;
-                                font-size: 14px;
-                                font-weight: 400;
-                                color: #FFFFFF;
-                                line-height: 24px;
-                            }
-
-                            p.tb_percent {
-                                width: 57px;
-                                height: 24px;
-                                font-size: 16px;
-                                font-weight: 700;
-                                color: #F2B810;
-                                line-height: 24px;
-                                display: flex;
-
-                                img {
-                                    width: 12px;
-                                    height: 12px;
-                                    margin-top: 8px;
-                                }
-                            }
-                        }
-                    }
-
-                    #pcfxb {
-                        width: 100%;
-                        height: 150px;
-                    }
-                }
-            }
-
-            .yhhyzb {
-                height: 353px;
-                width: 100%;
-                background: url("../assets/客户侧总体用能情况分析/组 3119.png");
-                background-size: cover;
-                position: relative;
-                margin-top: 6px;
-
-                .title {
-                    position: absolute;
-                    left: 160px;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                }
-
-                #yhhyzb {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
-
-        .footer {
-            position: absolute;
-            width: 1445px;
-            height: 325px;
-            bottom: 10px;
+          .tit_second {
+            width: 132px;
             display: flex;
             justify-content: space-between;
 
-            .ndqylfb {
-                width: 776px;
-                height: 100%;
-                background: url(../assets/zhsdy/用能量-框.png);
-                background-size: cover;
-                position: relative;
+            div {
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
 
-                .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;
-                }
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
 
-                #ndqylfb {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            .ggzcxx {
-                width: 653px;
-                height: 325px;
-                background: url(../assets/zhsdy/组\ 3120.png);
-                background-size: cover;
-                position: relative;
-
-                .title {
-                    position: absolute;
-                    left: 50%;
-                    width: 144px;
-                    height: 36px;
-                    font-size: 18px;
-                    font-family: "Source Han Sans";
-                    font-weight: 700;
-                    color: rgba(255, 255, 255, 0.87);
-                    line-height: 36px;
-                    transform: translateX(-50%);
-                }
-
-                #ggzcxx {
-                    width: 100%;
-                    margin-top: 60px;
-
-                    ul {
-                        width: 100%;
-
-
-                        li {
-                            width: 100%;
-                            height: 40px;
-                            padding: 0px 36px 0px 18px;
-                            box-sizing: border-box;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-
-                            .img {
-                                width: 12px;
-                                height: 12px;
-                                display: block;
-                            }
-
-                            .times {
-                                width: 145px;
-                                height: 36px;
-                                color: #52C2FF;
-                                font-size: 14px;
-                                line-height: 36px;
-                                display: block;
-                            }
-
-                            .info {
-                                width: 381px;
-                                height: 36px;
-                                white-space: nowrap;
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                                font-size: 14px;
-                                line-height: 36px;
-                                display: block;
-                            }
-                        }
-
-                        li:nth-child(2n+2) {
-                            background: #0E2C7E;
-                        }
-                    }
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
                 }
+              }
             }
+          }
         }
 
-        #map {
-            width: 994px;
-            position: absolute;
-            height: 627px;
-            left: 50%;
-            transform: translateX(-50%);
-            overflow: hidden;
+        #qyyh {
+          width: 100%;
+          height: 180px;
+          margin-top: 100px;
         }
+      }
+
+      .ndsdl {
+        height: 315px;
+        background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+        background-size: cover;
+        margin-top: 6px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        .bg_title {
+          width: 394px;
+          height: 62px;
+          background: url(../assets/zhsdy/组\ 3187.png);
+          background-size: cover;
+          position: absolute;
+          top: 40px;
+          display: flex;
+          justify-content: space-around;
+
+          .tit_first {
+            width: 116px;
+            height: 44px;
+            font-size: 32px;
+            font-weight: 700;
+            color: #14adfd;
+            line-height: 44px;
+            display: flex;
+
+            .tit_danwei {
+              width: 14px;
+              height: 44px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ffffff;
+              line-height: 44px;
+            }
+          }
+
+          .tit_second {
+            width: 132px;
+            display: flex;
+            justify-content: space-between;
+
+            div {
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 30px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 30px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 4x;
+                }
+              }
+            }
+          }
+        }
+
+        #ndsdl {
+          position: absolute;
+          width: 100%;
+          height: 200px;
+          bottom: 10px;
+        }
+      }
     }
+
+    .right {
+      width: 436px;
+      height: 100%;
+
+      .ndsdje {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #ndsdje {
+          width: 100%;
+          height: 100%;
+          padding-top: 50px;
+
+          .infos {
+            width: 396px;
+            height: 104px;
+            display: flex;
+            justify-content: space-between;
+            background: url(../assets/zhsdy/组\ 3168.png);
+            background-size: cover;
+            margin: 0 auto;
+            margin-bottom: 15px;
+
+            .first {
+              width: 180px;
+
+              p:nth-child(1) {
+                width: 180px;
+                height: 44px;
+                display: flex;
+                justify-content: space-between;
+
+                img {
+                  width: 15px;
+                  height: 15px;
+                  border: none;
+                  display: block;
+                  margin-top: 10px;
+                  margin-left: 10px;
+                }
+
+                span.titles {
+                  width: 140px;
+                  height: 44px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 44px;
+                  display: block;
+                }
+              }
+
+              p.money {
+                width: 145px;
+                height: 44px;
+                font-size: 40px;
+                font-weight: 700;
+                color: #52c2ff;
+                line-height: 44px;
+
+                .danwei {
+                  color: #fff;
+                  font-size: 14px;
+                }
+              }
+            }
+
+            .second {
+              width: 172px;
+              height: 100%;
+
+              div.s_tit {
+                width: 172px;
+                display: flex;
+                justify-content: space-around;
+
+                p:nth-child(1) {
+                  width: 28px;
+                  height: 36px;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                }
+
+                p.tb_percent {
+                  width: 57px;
+                  height: 30px;
+                  font-size: 16px;
+                  font-weight: 700;
+                  color: #f2b810;
+                  line-height: 30px;
+                  display: flex;
+
+                  img {
+                    width: 12px;
+                    height: 12px;
+                    margin-top: 8px;
+                  }
+                }
+              }
+
+              .bigBox {
+                width: 172px;
+                height: 10px;
+                background-color: #273546;
+                border-radius: 67px 67px 67px 67px;
+                margin-top: 5px;
+
+                .smallBox {
+                  width: 100px;
+                  height: 10px;
+                  border-radius: 67px 67px 67px 67px;
+                  background: linear-gradient(
+                    to right,
+                    rgba(38, 206, 253, 1) 20%,
+                    rgba(42, 254, 255, 1) 100%,
+                    rgba(38, 206, 253, 1) 20%
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .pcfx {
+        height: 294px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #pcfx {
+          width: 100%;
+          height: 100%;
+          padding-top: 40px;
+
+          .pc_tit {
+            width: 398px;
+            height: 48px;
+            margin: 0 auto;
+            background: url(../assets/zhsdy/组\ 3169.png);
+            background-size: cover;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 5px;
+
+            .pc_l {
+              width: 272px;
+              height: 48px;
+              display: flex;
+              justify-content: flex-start;
+
+              .pc_name {
+                margin-left: 18px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+                display: block;
+              }
+
+              img {
+                width: 15px;
+                height: 15px;
+                margin-top: 18px;
+                margin-left: 10px;
+              }
+
+              .pc_count {
+                margin-left: 14px;
+                height: 44px;
+                font-size: 24px;
+                font-weight: 700;
+                color: #0aa7ff;
+                line-height: 44px;
+                display: block;
+              }
+
+              .pc_danwei {
+                margin-left: 6px;
+                width: 33px;
+                height: 44px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 44px;
+              }
+            }
+
+            .pc_r {
+              margin-right: 20px;
+
+              p:nth-child(1) {
+                width: 28px;
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+              }
+
+              p.tb_percent {
+                width: 57px;
+                height: 24px;
+                font-size: 16px;
+                font-weight: 700;
+                color: #f2b810;
+                line-height: 24px;
+                display: flex;
+
+                img {
+                  width: 12px;
+                  height: 12px;
+                  margin-top: 8px;
+                }
+              }
+            }
+          }
+
+          #pcfxb {
+            width: 100%;
+            height: 150px;
+          }
+        }
+      }
+
+      .yhhyzb {
+        height: 353px;
+        width: 100%;
+        background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+        background-size: cover;
+        position: relative;
+        margin-top: 6px;
+
+        .title {
+          position: absolute;
+          left: 160px;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+        }
+
+        #yhhyzb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    .footer {
+      position: absolute;
+      width: 1445px;
+      height: 325px;
+      bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .ndqylfb {
+        width: 776px;
+        height: 100%;
+        background: url(../assets/zhsdy/用能量-框.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          transform: translateX(-50%);
+          line-height: 36px;
+        }
+
+        #ndqylfb {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .ggzcxx {
+        width: 653px;
+        height: 325px;
+        background: url(../assets/zhsdy/组\ 3120.png);
+        background-size: cover;
+        position: relative;
+
+        .title {
+          position: absolute;
+          left: 50%;
+          width: 144px;
+          height: 36px;
+          font-size: 18px;
+          font-family: "Source Han Sans";
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.87);
+          line-height: 36px;
+          transform: translateX(-50%);
+        }
+
+        #ggzcxx {
+          width: 100%;
+          margin-top: 60px;
+
+          ul {
+            width: 100%;
+
+            li {
+              width: 100%;
+              height: 40px;
+              padding: 0px 36px 0px 18px;
+              box-sizing: border-box;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .img {
+                width: 12px;
+                height: 12px;
+                display: block;
+              }
+
+              .times {
+                width: 145px;
+                height: 36px;
+                color: #52c2ff;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+
+              .info {
+                width: 381px;
+                height: 36px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                font-size: 14px;
+                line-height: 36px;
+                display: block;
+              }
+            }
+
+            li:nth-child(2n + 2) {
+              background: #0e2c7e;
+            }
+          }
+        }
+      }
+    }
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
+    }
+  }
 }
 </style>
-  
\ No newline at end of file